基本的にフォントは「テーマ」で標準のフォントが決められています。ここでは、標準のフォントと異なるフォントを使用する方法を教えます。
投稿画面でフォントを指定する
投稿画面のブロックで、「タイポグラフィ」を設定する事で、フォントを変更する事が出来ます。
「タイポグラフィ」のウィンドウに「フォント」が表示されていない時は次の様にします。
「タイポグラフィオプション」を選択する
オプションのウィンドウから、「フォント」にチェックを入れます。
「フォント」が表示され、登録されたフォントをコンボボックスから選択できます。
この画面で登録されているフォントは、テーマに保存されているフォントになります。このコンボボックスを選択する事で、フォントの変更が出来ます。
ここに無いフォントを使用したい場合は、「Google フォント」を使用する事が出来ます。
次項で、「Google フォント」を追加する方法を説明しています。
なお、その他のabobeのフォントやフリーのフォントなどは、デザイン性を重視したサイト以外はウェブ環境では、フォントが重くなり表示が遅くなるなどのデメリットが発生します。
また、このサイトではブロックエディタを使用する事がメインなので、利用方法は割愛させていただきます。
フォントを追加する
ブロックエディタでは、Google Font を使ったフォントの変更が出来ます。また、フォント自体をwordpressに組み込んでより使いやすくする事が可能です。
Google フォントとは
Google フォントとは、Googleが無料で提供するWebサービスの一つです。2024年9月時点で、Google Fontsには1700種類以上のフォントが提供されており、その中には60種類以上の日本語フォントも含まれています。
ウェブ用に最適化されており、ページの読み込み速度に影響しにくい事とライセンス料金が無料で、数多くのサイトで利用されています。
商用利用もOKで、オープンソースであり使用に関して費用はかかりません。
公式サイト Google Fonts から利用するフォントを探します。
日本語の特設サイトは、Google Fonts + 日本 で見る事が出来ます。
フォントをインストールするには、以下の手順で作業します。
フォントをインストールする準備
外観＞エディターからデザインを選択する
スタイルを選択する
タイポグラフィを選択する
フォントの管理を選択する
テーマに登録されているフォントの一覧がリスト表示される
Googleフォントをインストール
Google フォントへアクセスしてインストール完了までの流れ
フォント画面
フォントをインストールをクリックする。Google フォントへのアクセスが許可されていない場合は、以下の画面が表示されるので、「Google Font へのアクセスを許可する」をクリックします。
フォントの検索
Google フォントに接続出来たら、登録されているフォントの一覧が表示されています。登録数が多いので、「検索」を利用して利用したいフォントを探す方が早いです。ここでは、「jp」で検索しました。
Googleフォントのバリアントは、主にウェイト（太さ）やスタイルのバリエーションを指します。これはフォントによって登録されたバリエーションが違います。
フォントのインストール
Noto Serif.JPをインストールします。バリアントは400が汎用性が高く標準的なサイズです。
インストールされました。
閉じるをクリックして「ダッシュボード」や「投稿一覧」の画面に戻ります。
実際に設定でフォントがインストールされ、使用出来るかをチェックしてみましょ。
以上の操作で、Google フォントの新しいフォントが追加され、前項目のフォントの設定画面で利用する事が出来ます。
注意事項
フォントの追加は機能面で便利な機能なのですが、多く登録するとサイトの動きが遅くなり、ページを表示するまでの時間がかかるようになるので、必要以上のフォントを追加しない様にしてください。
フォントの探し方
Google フォントの中から、登録されているフォントが多い為に探すのに苦労します。ここでは、ネット検索を利用して良い感じのフォントを見つける方法を説明します。
次の検索キーワードを参考にして検索してみて下さい。
「Google フォント 日本語 おしゃれ」
- 日本語
日本語の場合に指定し英語の場合は省略する - おしゃれ
シャープとかおすすめとかイメージ的な用語
Macやデザインなどで利用しているフォントに近いものを探す場合は、「ヒラギノ明朝」を例にすると
「Google フォント ヒラギノ明朝」
で検索するとGoogle フォントで近いフォントを紹介しているサイトが見つかります。
特にGoogle と Adobe が共同開発した高品質フォント［Noto］はおすすめです。
https://fonts.google.com/noto/specimen/Noto+Sans+JP
英文なら、Robotoを組み合わせると良いかもです。