フォントを選択するとサイトを個性的に見せることができます。各テーマでは、Google Fonts を含む厳選されたリストからフォントを選択できます。
フォントを変更するオプションは、ご使用中のテーマによって異なります。
- サイトエディターをサポートするテーマを使用している (つまり管理画面で「外観」→「エディター」 と表示できる) 場合、サイトエディターのスタイルを使用してフォントを変更できます。
- これらのテーマのいずれかを使用する場合は、WordPress エディターの「グローバルスタイル」オプションを使用します。
- その他のテーマでは 「外観」→「カスタマイズ」→「フォント」に移動し、サイトで使用するフォントをカスタマイズできます。
このガイド内
この機能は、WordPress.com Explorer、Creator、Entrepreneur の各プランをご利用のサイトで使用できます。サイトでレガシープランをご利用の場合は、Pro プランでご使用いただけます。
サイトエディターをサポートするテーマを使用しているサイトの場合、タイポグラフィ設定でサイトのフォントを変更できます。この設定は、サイトエディターのスタイルボタンからアクセスできます。
これらのテーマのいずれかを使用するサイトの場合、「グローバルスタイル」を使用してサイトのフォントを変更できます。
- 管理画面で「固定ページ」をクリックします。
- 「新規追加」ボタンまたは既存ページのタイトルをクリックして、WordPress エディターで開きます。
- 新しい固定ページを追加する場合は、お好みのレイアウトまたはデフォルトの空白レイアウトを選択します。
- エディターで「グローバルスタイル」ボタンをクリックします。設定アイコンと緑の「Jetpack」ボタンの間に「Aa」ボタンがあります。
- 「見出しフォント」または「ベースフォント」の下のドロップダウンをクリックし、使用可能なフォントのオプションを表示します。
フォントは、1つは見出し用、もう1つはベースフォント用のペアで設定されます。
- 見出しフォント: ブログのすべての見出しで使用するフォントを選択します。見出しテキストの一般的な例には、投稿と固定ページのタイトル、ウィジェットのタイトル、コメントのヘッダー、投稿とページ内の見出しがあります。
- ベースフォント: ブログの本文のテキストとメニューに使用するフォントを選択します。
「グローバルスタイル」メニューで「公開」をクリックして新しいフォントペアを保存するか、「リセット」をクリックして変更を元に戻します。
「グローバルスタイル」メニューで変更を公開しても、作業中の特定のページは公開されません。
ブロックエディターには、個別のブロック内のフォントサイズを変更するオプションが用意されています。
見出しのフォントサイズを変更するには、見出しブロックの別のフォント (H1、H2など) を選択します。
段落、ボタン、その他のテキストブロックのタイポグラフィオプションは「ブロック設定」にあります。ここでテキストをプリセットサイズに変更したり、カスタムフォントサイズを入力したりできます。
サイドバーが表示されない場合、右上の 「設定」アイコンをクリックして設定を表示させます。幅の異なる2つの列から成る正方形のアイコンです。
多くのテーマでは、「外観」→「カスタマイズ」に移動するとフォントを変更するオプションがあります。カスタマイザーにフォントのオプションがない場合は、お使いのテーマがグローバルスタイルのフォントを変更する方法に対応しているかどうかを確認してください。
フォントは、1つは見出し用、もう1つはベースフォント用のペアで設定されます。
- 見出し: ブログのすべての見出しで使用するフォントを選択します。見出しテキストの一般的な例には、投稿と固定ページのタイトル、ウィジェットのタイトル、コメントのヘッダー、投稿とページ内の見出しがあります。
- ベースフォント: ブログの本文のテキストとメニューに使用するフォントを選択します。
フォントを変更するたびに、ライブのプレビューが更新され、ブログでフォントがどのように表示されるかを確認できます。
フォントスタイル – 見出しフォントのスタイルを調整するには、フォントの下およびフォントの左側のオプションをクリックします。使用できるスタイルは選択したフォントにより異なります。
フォントサイズ – 見出しまたはベースフォントのいずれかのサイズを調整するには、選択したそれぞれのフォントの下および右にあるオプションをクリックし、ドロップダウンメニューからサイズを変更します。
💡
カスタム CSS を使ってグローバルデフォルトのフォントサイズを変更できます。
フォントの選択に満足したら、サイトを「公開」します。公開せずにカスタマイズを続行する場合は、「下書きを保存」します。
カスタムフォントを選択したら、必要に応じて何度でも変更できます。
使用するカスタムフォントを変更するには、「外観」→「カスタマイズ」→「フォント」の順に移動し、別の見出しまたはベースフォントを選択します。または、カスタムフォント名の右側にある「X」をクリックすることで、テーマのデフォルトのフォントに戻すことができます。
フォントの変更に満足できたら「公開」をクリックするか、「下書きを保存」してサイトのカスタマイズを続行します。
📌
保存した後に、ブログやサイトにフォントが表示されるまで、数分かかる場合があります。また、サイトで最新のバージョンが表示されるように、ブラウザーのキャッシュをクリアする必要がある場合もあります。
フォントをテーマのデフォルトにリセットするには、現在のフォントの横にある「X」をクリックします。
- 「外観」→「カスタマイズ」の順に移動します。
- 「フォント」をクリックします。
- カスタムフォントの横にある「X」をクリックし、フォントをテーマのデフォルトにリセットします。
- 「変更を保存」をクリックします。
フォントを選択する場合、個別のページやテキストの特定行ではなく、サイト全体のフォントを設定するオプションが表示されます。設計の観点から言えばこれがベストプラクティスです。サイトの見栄えが最も良くなるのは、サイト全体でフォントの一貫性が保たれている場合だからです。異なるフォントが大量に使用されているサイトは見苦しくなる可能性があります。
特定のテキスト文を目立たせることが目的の場合は、別の色を使用する、引用ブロックを使用する、画像を挿入するなどの方法を検討してください。
プラグインを利用すると、サイトにより多くのフォントをインストールできます。サイトに独自のフォントを追加できる、さまざまなプラグインがあります。プラグインを検討する際は、評価、よいコメントの数、プラグイン開発者から得られるサポートの種類を確認します。プラグインをテストした後に使わないと決めた場合は、プラグインの一覧をすっきりとさせるために、プラグインを無効化または削除します。
💡
どのフォントを使用したらよいかわからない場合は、9つの無料筆記体フォントに関するこちらの投稿を参照してください。
外部の Typekit.com アカウントを WordPress.com サイトまたはブログに連携させることはできません。
「設定」→「一般」でブログにラテン文字以外の言語を選択した場合、すべてのカスタムフォントの文字が読み込まれます。英語、イタリア語、ポルトガル語、スペイン語などラテン文字の言語を選択した場合、一部のフォントのみが読み込まれます。ブログで一部の文字が正しく表示されない場合は、まず言語設定を確認して、ブログを書くときに使用している言語が選択されていることを確認します。その後、「カスタマイザー」→「フォント」に移動してフォントを再保存し、新しい言語設定に更新します。
ある言語で特定のフォントが正しく表示されるかどうかを確認するには、そのフォントをカスタマイザーで指定し、フォントがテーマのデフォルトフォントから変更されるかどうかを確認するとよいでしょう。現在、アジアの言語には対応していません。キリル文字の言語はほとんど対応していますが、すべてのフォントファミリーに対応しているわけではありません。言語サポートは今後とも継続的に拡大し改善していく予定です。
これはフォントのちらつき (FOUT) と呼ばれます。接続が遅い場合、テキストは最初にテーマのデフォルトのフォントで表示されます。このようにすることで、コンテンツの表示を待っているときに空白のページが表示されず、読者はカスタムフォントが読み込まれる前にコンテンツを読み始めることができます。これにより、ページが読み込みを完了する前に別のフォントが一瞬表示されますが、接続の遅い読者にとってはその方が空白の画面が表示されるよりも好ましいと考えられます。この現象が発生しないようにするには「外観」→「カスタマイズ」→「追加 CSS」に移動して CSS エディターを使用し、次の CSS コードをサイトに追加します (プレミアム、ビジネス、eコマース、従来の Pro プランのみ): .wf-loading body { visibility: hidden; }
またはhtml:not(.wf-active) body { display: none; }
WordPress.com テーマで使用される Google Fonts を提供するリクエストはすべて WordPress.com のサーバーを通じて提供され、Google の CDN/FDN は現在使用されていません。この変更は2022年12月に行われました。
サイトでカスタムプラグインまたはサードパーティのテーマを使用している場合は、Google の CDN/FDN を通じて Google Fonts を提供していないことをプラグインやテーマの開発者に確認してください。
日本語サポート 
コメントを投稿するにはログインしてください。