WordPressでGoogle Fontsを使用する方法

WordPressサイトでGoogle Fontsを使用する方法です。

TOC

Google Fontsにアクセス。

任意のフォントを選択します。

選択するとPC表示の場合右側に選択したフォントが反映されます(複数選択可能)。

<link>にチェックを入れてコピーします。

WordPress管理画面で行うこと

カスタマイズ>高度な設定>headタグ終了直前に出力するコード></head>直前

この</head>直前の部分に先ほどのGoogle Fonts内でコピーしたものを貼り付けます。

もう一度Google Fontsへ

先ほどの<link>の1つ下にCSS rules to specify familiesがあります。

この部分に表示されている内容をコピーします。

WordPress管理画面へ

カスタマイズ>追加CSS

こちらに先ほどのコピーを下記のように貼り付けます。

/*Googleフォント*/
body { 
	font-family: 'Rubik', 'Zen Kaku Gothic New', sans-serif; /*Googleフォントからコピーしたもの*/
}

font-family: 'Rubik', 'Zen Kaku Gothic New', sans-serif;この部分がGoogle Fontsからコピーした部分です。

bodyはサイト全体に対する指定を意味します。

この部分を特定の箇所にすれば、その部分だけにフォントを反映することができます。

まとめ

以上がWordPressサイトでGoogleFontsを使用する方法です。

S H A R E
  • URLをコピーしました!

\ SWELLのカスタマイズ /

WordPressテーマ「SWELL」を

使用したカスタマイズ事例集

TOC