テーマオプション カスタムフォント

このコンテンツでは、【テーマオプション カスタムフォント】の使い方について解説をしています。

AvadaはGoogleフォントを使用することができますが、テーマオプション 本文のフォント設定で触れたように日本語版のGoogleフォントに対応していません。またメイリオやヒラギノといった日本語定番のフォントもデフォルトで選択することができません。

しかし、こういった時にカスタムフォントを使用することで、自分が好きなフォントを簡単にサイトに適用することができます。全世界で売られているテーマならではの機能ですね。実際に当サイトでは、Googleフォントに日本語版Noto Sans CJK JPのRegularとBoldの2種類を用意し、本文・見出しなどで使い分けています。

カスタムフォントの設定からフォント設定に利用するまでの流れを見ていきます。

最初に使いたいフォントの各ファイルを用意します。
アップロードできるファイルは、以下の5種類となります。

1. WOFF
2. WOFF2
3. TTF
4. SVG
5. EOT

画像の通り（2017年7月）WOFFファイルを用意すれば、ほとんどのブラウザでカスタムフォントを使用することができます。ただし、Opera Mini（モバイルブラウザ）は対応していません。Opera Miniでカスタムフォントを対応させたい場合は、SVGも合わせて用意するといいでしょう。

WOFFは、Web Open Font Formatの略で、通常のフォントよりも圧縮され読込速度が速い新しいWebフォント形式です。 WOFFコンバータを使用することで簡単に変換することができます。

WOFFファイルを用意したらWordPressにアップロードします。

「① Add（追加）ボタン」をクリックすると画像のようにアップロード画面が表示されます。「② WOFFのアップロードアイコン」をクリックし、用意したWOFFファイルをアップロードします。

WOFFファイルをアップロードしたら、Font Name（フォント名）をつけます。

ここで設定するフォント名がフォントファミリーの「Custom Fonts」に表示される名前となります。

フォント名を設定したら、テーマオプションのSave Changes（変更を保存）で保存し、「F5」や「Ctrl+R」などでページをリロードします。リロードしないと反映されませんので注意しましょう。

フォント設定があるテーマオプション【Body Typography（本文のフォント設定）】などのフォントファミリーに、STEP3で設定したフォント名が表示されるので選択します。

最後に、STEP4と同様にSave Changes（変更を保存）で設定を保存したら完成です。

また、上記の手順を繰り返すことで、画像のようにいくつでも使用したいフォントをアップロードすることができます。