サイトのフォントを変更する

サイトのテキスト文字のスタイルをフォントといいます。このガイドでは、サイトのフォントを選択する方法を説明します。

プレミアムプラン、ビジネスプラン、コマースプランのサイトでは、サイトで使用するフォントを豊富な選択肢から選べますが、独自のカスタムフォントをアップロードすることはできません。

カスタムフォントをアップロードし、Google Fontsからフォントスタイルをインストールするには、ビジネスプランまたはコマースプランにアップグレードします。

以下の手順でサイトのフォントを変更できます。

このガイドのどのセクションに従えばよいかを決めるには、ダッシュボードにアクセスして左側の「外観」の下を確認します。そこに「エディター」が表示されている場合は、このガイドのサイトエディターのセクションを参照します。それ以外の場合は、ページエディターまたはカスタマイザーの手順を参照します。

フォントを選択する場合、個別のページやテキストの特定行ではなく、サイト全体のフォントを設定するオプションが表示されます。設計の観点から言えばこれがベストプラクティスです。サイトの見栄えが最も良くなるのは、サイト全体でフォントの一貫性が保たれている場合だからです。異なるフォントが大量に使用されているサイトは見苦しくなる可能性があります。

特定のテキストを目立たせることが目的の場合は、別の色を使用する、見出しまたは引用ブロックを使用する、画像を挿入するなど他の方法を検討してください。

本ガイドのこのセクションは、WordPress.com ビジネスプランおよびコマースプランと従来の Pro プランをご利用のサイトを対象としています。ビジネスプランをご利用の場合は、必ず有効化してください。無料プラン、パーソナルプラン、プレミアムプランのサイトでこの機能を利用するには、プランをアップグレードしてください。

サイトに適した豊富なフォントスタイルが揃っています。さらに多くのフォントから選択する場合は、サイトエディターから直接、カスタムフォントをインストールまたはアップロードできます。

ガイドでカスタムフォントをインストール、アップロード、管理する方法について確認できます。

フォントのちらつき (FOUT) は、選択したフォントが表示される前に別のフォントが一瞬だけ表示されることを意味します。接続が遅い場合、テキストは最初にテーマのデフォルトのフォントで表示されます。このようにすることで、選択したフォントが読み込まれる前に、空白のページを見ながら待つのではなく、コンテンツを読み始めることができます。これにより、ページが読み込みを完了する前に別のフォントが一瞬表示されますが、接続の遅い読者にとってはその方が空白の画面が表示されるよりも好ましいと考えられます。

この現象が発生しないようにするには「外観」→「カスタマイズ」→「追加 CSS」に移動して CSS エディターを使用し、対象プランのサイトに次の CSS コードを追加します。

.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 を提供していないことをプラグインやテーマの開発者に確認します。GDPR の詳細についてはこちらをご覧ください。