Webフォントの選び方とWordPressへの導入｜文字・配信・更新を確認する手順

Webフォントは、見せたい文字を表現する選択肢です。導入しただけで全端末が同じ表示になり、サイトの品質や売上が上がると保証されるものではありません。読む人、実際の原稿、文字の大きさ、配信と更新の条件を揃えて選びます。

この記事は、企業のWeb担当者と制作会社のデザイン・実装担当向けです。Google Fontsの候補、読み込みとCSS指定、WordPressでの保存先、公開確認を整理します。書体を選び、更新しながら使える形で導入する手順を扱います。

1. システムフォントとWebフォントの違いを理解する

システム側にある書体を使う方法と、Web経由でフォントを取得する方法では、必要な通信と利用できる書体が異なります。Webフォントも、取得失敗、文字の不足、代替書体、設定によって表示が変わります。端末差が完全になくなるとは考えません。

読む場面と、代替する書体を先に決める

会社案内の見出し、商品名、長い本文、フォームの注意書きでは、必要な読みやすさが違います。実際の文で漢字、かな、英数字、記号、太字を比べてください。明朝・ゴシックの名称だけで本文の可読性を一律に決めず、小さな画面や読者の拡大操作でも判断します。

フォントが使えない場合に備え、CSSのfont-familyへ代替候補とserif/sans-serifなどの汎用ファミリーを指定します。文字の対応と候補の順序はMDNのfont-familyを参照できます。英語フォントを先に書けば言語ごとに厳密に切り替わるのではなく、その文字を扱える書体が選ばれることを確認します。

2. 日本語の5候補を、同じ原稿で比較する

次の5書体は、Google Fontsの公開メタデータで名称と種類を確認できます。実際の見出し・本文・数字を同じサイズで比較し、字形、密度、線、太さから用途に合う候補を選びます。

Google Fontsの各配布フォルダーにはライセンスもあります。名称だけで利用や再配布の全条件を判断せず、採用するファイルの正式な条件を確認します。ファミリー数、市場シェア、制作のROIを裏付けなしに選定理由へ加えないようにします。

3. 本文・見出し・太字の役割と、必要な文字を揃える

書体を増やす前に、本文、見出し、注記、ボタン、強調で何を変えるか整理します。文字を小さく薄くすることで重要な条件を見えにくくしないようにします。固定の最大3ウェイトを万能な条件にせず、使用箇所と配信量、更新時に必要になる文字から選びます。

英数字と太さは、実際に使う組み合わせで見る

候補のfont-family、font-weight、サイズ、行間を対応させます。CSSで太字を要求していても、その太さをどう取得しているか、ブラウザーがどの書体を使っているかは別に確認します。見た目が似ていることだけで同じファイルと判断しないでください。

文字を絞った配信は固定見出しなどの候補ですが、後で見出しを変えると新しい文字が含まれない場合があります。日々更新する記事と固定の見出しを分け、誰が配信条件を更新するかを決めます。原稿を自由に変えられることも、導入時の完成条件です。

4. 読み込みとCSS指定を、別々に確認する

Google Fonts APIの導入ガイドでは、スタイルシートを読み込み、CSSで書体を指定する手順が案内されています。CSSへ名前を書くだけでフォントファイルが取得されると考えないようにします。次の例は練習用で、採用する書体と太さを先に確認してください。

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">

.example-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
}
.example-title { font-weight: 700; }

display=swapも、すべての条件で表示速度や文字のずれを解決する保証ではありません。読み込み前と後の表示を比較し、採用した書体と代替書体でレイアウトがどう変わるか確認します。HTMLのlinkとCSSの@importを重ねて同じ要求を増やさず、どこが読み込みを管理するかを決めます。

5. WordPressでは、設定・追加CSS・テーマの担当を分ける

テーマに書体設定があれば、その設定と保存結果、公開側の読み込みを調べます。クラシックテーマのカスタマイザー、ブロックテーマのスタイル、追加機能の設定は同じものではありません。どのテーマにも同じフォントメニューがあるとは約束できません。

テーマの実装例は、現在の構成に合わせて採用する

実装担当はWordPressのwp_enqueue_styleなどで読み込みを管理できます。以下はフロント側へCSSを登録する例で、特定案件で最速となる実装や、編集画面へ同じ表示が出ることを保証しません。既存の読み込みとの重複、子テーマ/独自機能の置き場所を先に確認します。

function acqua_example_font_styles() {
    wp_enqueue_style(
        'acqua-example-font',
        'https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'acqua_example_font_styles');

プレビューで書体が変わったことと、一般公開の画面に同じ設定が出たことを分けます。保存後にテーマの設定を開き直し、CSSとフォントの取得先を照合します。反映されない場合は追加CSSの確認手順へ進み、広い上書きを増やす前に保存と適用を調べます。

6. 配信方式と速度は、実際の通信と管理負担で選ぶ

外部サービスからの配信と自社にファイルを置く方式では、接続先と更新担当が異なります。自社配信にすれば必ず速い、国内向けなら情報の扱いを気にしなくてよい、と一律には判断しません。必要な通信、配布条件、社内の情報管理方針、ファイルを更新する人を確認します。

同じフォント名でも、要求する文字、太さ、ブラウザーへの応答で取得量が変わります。固定のMB数や「URLに太さがない＝全ウェイト」という説明を使わず、実際に要求されるCSSとファイルを見ます。接続の準備も、必要な接続先と効果を調べて採用します。

速度と文字のずれ、外部配信/自社配信の詳しい比較はGoogle Fontsの表示速度改善も参照してください。配信方式は、実際の測定と管理条件を合わせて選びます。

7. 公開では、実際の書体と更新後の文字を検収する

PCとスマホ、読み込み前/後、長い見出し、太字、フォーム、数字・記号を確認します。CSSにfont-familyが書かれていることと、表示する文字でその書体が使われていることは別です。ChromeのCSS検査を参考に、実際の文字と使用書体、取得したリソースを照合します。

診断の警告なしを、すべての検収合格にしない

速度診断でフォントの指摘がなくても、文字欠け、太さの違い、重要な注記の読みにくさ、更新後の不足は残り得ます。評価する項目とURL、端末、幅、キャッシュ条件を残します。検索や問い合わせの効果を、書体の読み込み成功から推測しません。

担当者が見出しを変えた状態も試し、どこまで通常の更新で対応できるかを引き継ぎます。修正前の設定・ファイル、差分、採用した版と戻し方を残せば、次に担当が変わっても確認できます。

8. Acquaへ相談する材料と、支援後の状態

企業の担当者はWeb制作・運用の案内へ、対象ページ、読みづらい箇所、残したい印象、実際の原稿、更新する人を共有できます。「このフォントなら必ずプロ品質になる」ではなく、読者の判断と操作を助ける文字の見せ方を整理します。

制作会社は実装支援へ、指定書体・太さ、許諾情報、デザイン、現在の読み込み、変更できる保存先、PC/SPの検収と公開担当を伝えてください。指定に沿ったWordPress反映、既存の表示修正、確認と更新の引継ぎを相談できます。

完成状態は、必要な文字が読め、読み込みと更新の条件を説明でき、担当者が正しい場所で変更できることです。相談窓口には困る画面と希望する状態を記入してください。制作工数、料金、速度や売上の結果を一律に約束しません。