ガイド/サイトをカスタマイズ/サイトのフォントを変更する

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

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

対象のフォントとプラン

この機能は、WordPress.com プレミアムプラン、ビジネスプラン、コマースプランと従来の Pro プランをご利用のサイトで使用できます。無料プランおよびパーソナルプランのサイトでこの機能を利用するには、プランをアップグレードしてください。

動画チュートリアル

ブロックテーマのフォントを更新する方法について以下の動画をご覧ください。すべてのテーマタイプの手順については、このガイドの次のセクションを参照してください。

コース: WordPress.com でサイトを作成」より
この動画の言語は英語です。
YouTube には、自分の言語で視聴できる自動翻訳機能があります。

自動翻訳字幕を表示するには:

  1. 動画を再生します。
  2. 動画右下の ⚙️ 設定 アイコンをクリックします。
  3. 字幕/CC を選択します。
  4. 自動翻訳 を選択します。
  5. 希望する言語を選びます。

自動吹き替え(実験機能)で視聴するには:

  1. ⚙️ 設定 アイコンをクリックします。
  2. 音声トラック を選択します。
  3. 視聴したい言語を選びます。

ℹ️ 翻訳と吹き替えは Google により自動生成されるため、正確でない場合があります。また、自動吹き替えは現在テスト中で、すべての言語で利用できるわけではありません。注: 字幕の文章は Google 翻訳で生成されるため、完全とはいえませんが、内容の把握に役立ちます。

フォントを変更する

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

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

ご使用のエディターに適したタブを次から選択してください。

サイトエディター対応のテーマをサイトに使用している場合、「スタイル」オプションを使用してサイトのフォントを変更できます。サイトのフォントを変更するには以下の手順を実行します。

  1. サイトのダッシュボードにアクセスします。
  2. 「外観」→「エディター」の順に移動します。
  3. 左側の「スタイル」をクリックします。
  4. 「タイポグラフィ」オプションを選択します。
  5. サイトの次のテキスト要素から選択します。
    • テキスト
    • リンク (メニュー項目を含む)
    • 見出し
    • キャプション
    • ボタン
  6. 「フォント」の下にあるドロップダウンをクリックして、目的のフォントを選択します。選択したフォントにテキストが更新され、どのように表示されるかを確認できます。
  7. サイズ、外観 (太字と斜体)、行の高さ、文字間隔、大文字小文字など、テキストに関連するその他の設定を調整できます。
  8. 「変更を確認」または「保存」をクリックして変更を適用します。
サイトエディターが開き、「スタイル」メニューが有効化された「デザイン」パネルが表示されている。

上位のプランでは、独自のフォントファイルをアップロードできます。

特定のテキストにフォントを適用する

ブロックのタイポグラフィ設定を使用して、特定のブロック (サポート対象のテーマとブロック) のフォントを調整できます。または、特定のブロックにデフォルトのフォントを適用します。「見出し」または「引用」のブロックを使用して、テキストを目立たせることもできます。

カスタムフォントを追加する

WordPress.com で利用できるフォントに以外にも、サイトにはカスタムフォントを追加できます。Google Fonts からフォントをインストールする、またはお持ちのフォントファイルをアップロードする方法について説明するガイドをご用意しています。

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

フォントのちらつきを修正する

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

この現象が発生しないようにするには、対象プランのサイトにこちらの CSS コードを追加します。

.wf-loading body { visibility: hidden; }

または

html:not(.wf-active) body { display: none; }

Copied to clipboard!