WordPressでGoogle Fontsを使用する方法
WordPressサイトでGoogle Fontsを使用する方法です。
TOC
Google Fontsにアクセス。
Browse Fonts – Google Fonts
Making the web more beautiful, fast, and open through great typography
任意のフォントを選択します。
選択すると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を使用する方法です。