皆さんこんにちは！
ニノです。
今日はWebフォントについてご紹介します。
WordPressでウェブサイト制作をしていてフォントを変えたいと思ったことはないでしょうか？
サイトに合ったフォントを使用することでサイトが発信している情報がユーザーに伝わりやすくなるといった効果もあります。
フォントを設定するメリット
Googleやsafariなどブラウザによって使用されているフォントが異なります。
フォントのカスタマイズをすることにより、どのブラウザで表示した際にも同じ見た目になると言うメリットがあります。
WordPressでフォントを設定する方法は三つあります。
- プラグインを使用してフォントを変更
- Webフォントを読み込みフォントを変更
- サーバー上にフォントファイルを置きフォントを変更
WEBフォントをオススメする理由としては作業が簡単で、今後のメンテナンスも楽に行えるからです。
プラグインを使用するとサイトの表示速度が遅くなると言うデメリットもありますので、カスタマイズできる範囲に関してはプラグインを使用しないことをお勧めします。
WEBフォントの設定方法
WEBフォントでよく使用される「Googleフォント」を設定していきます。
設定方法としては
- Googleフォントを選ぶ
- Header.phpにコードを追記
- CSSでフォントを適応
このステップで進めていきます。
１、サイトに適応したいGoogleフォントを選択する
まずはGoogleFontsにアクセスします。
すると以下の画像の様にフォントが並んでいます。
この中から、自分のサイトに使用したいフォントを選択してください。
フォントを選んで「Click！」しましょう。
するとフォントの詳細ページに移ります。
次に「Select This Style」を「Click!」しましょう。
すると画面右側にSelected Familyと言うエリアが表示されます。
＜link＞と＠importのチェックがあるので＜link＞にチェックを入れる。
そのしたのコードをコピーする。
２、Header.phpにコードを追記
コピーしたコードをHeader.phpに貼り付けますので管理画面に移動。
外観→テーマエディターからheader.phpを選択する。（この際、子テーマを選択していることをお忘れなく！）
header.phpの中の<head>要素の中に上のGoogle Fontでコピーしたコードを貼り付ける。
その後もう一度GoogleFont に戻る。
今度は先ほどコピーした下のコードを「Copy！」
次にGooglefontを離れ、管理画面→外観→カスタマイズ→追加CSSへと進む
３、CSSでフォントを適応
管理画面→外観→カスタマイズ→追加CSSに進むとそこで*{}を記述し、「{」と「}」の間に先ほどGoogle Fontでコピーしたコードを貼り付ける。
（ちなみにCSSで＊（アスタリスク）を適応範囲に指定するとサイト内の全てに指定がかかります。（全称セレクタ））
以上で設定は終わりです。
お疲れ様でした。
『Before』
『After』
文字がスタイリッシュになった感じがしますね。
とても簡単に設定できますので、皆さんも一度チャレンジしてみてください。
注意事項
注意すべき点としては、「子テーマ」に記述すると言うことです。
親テーマに記述するとアップデートの際に上書きされてしまいます。
（カスタマイズが水の泡、、。）
また今回のカスタマイズをする前にコードを記述したheader.phpをバックアップしておきましょう。
