WordPress のフォントを自サイトで配信する：ファイル、ライセンス、表示速度

きれいな中国語フォントに変えたら、トップページが一瞬空白になったり、記事中の人名だけ別の書体になったりすることがあります。フォントは見た目だけでなく、ダウンロード量、文字の欠落、レイアウトの安定性にも関わります。自サイト配信とはサイト自身がフォントファイルを提供することで、ファイルを移すだけで必ず速くなるわけではありません。

まず本文用の書体を一つ、見出しには必要な太さだけを選び、限られたページで試します。その後、サイト全体に広げるか判断しましょう。以下では、ライセンス、ファイル、WordPress の設定、読者側での確認を順に扱います。

訪問者へのフォントファイル配信が認められるか確認する

自分のパソコンにフォントをインストールできても、サイトにアップロードしてブラウザーに配信してよいとは限りません。公式の入手元、ライセンス文、作者、バージョンを記録し、ウェブ利用、自サイト配信、予定している改変が認められるか確認します。商用フォントにはドメイン、アクセス量、契約プランの条件が付く場合もあるため、実際のライセンスに従ってください。

たとえば SIL Open Font License はウェブフォントとしての利用と配布を認めていますが、配布するファイルには所定のライセンス表示と著作権表示が必要です。予約名のあるフォントを改変する場合は、名称にも条件があります。無料でダウンロードできるだけで、自由に改名したり転売したりできると考えてはいけません。

サイト全体に独自フォントが本当に必要かも検討します。ブランドらしさが見出しだけに必要なら、本文はシステムフォントにするとダウンロード量と保守を減らせます。システムフォントは端末によって多少見た目が異なるので読みやすさの確認は必要ですが、訪問者全員に中国語フォント一式を追加配信する必要はありません。

必要な形式、太さ、文字を選ぶ

ウェブ用には WOFF2 を優先候補にしつつ、対象ブラウザーの要件を確かめます。デスクトップ向けの大きなファイルをすべてアップロードし、全ウェイトを読み込むのは避けましょう。本文、見出し、ボタンで何を使うかを書き出し、少数のファイルで足りるなら構成を単純に保ちます。

中国語フォントには膨大な文字が含まれます。サブセット化で容量は減らせますが、収録範囲はコンテンツに合っていなければなりません。現在のトップページにある文字だけを残すと、次の記事、人名、住所、読者コメントの文字が欠けるかもしれません。更新の多いサイトでは、その時点の最小容量だけを追わず、維持できる文字収録方針や適切な分割方式を用意します。

バリアブルフォントは一つのファイルで複数の太さなどに対応できますが、実際の容量と用途を比べる必要があります。使わない範囲が自動的に無コストになるわけではありません。標準と太字だけなら両案を測定し、新しい形式だから速いと決めつけないでください。

WordPress のフォントライブラリでファイルを管理する

現在の WordPress フォントライブラリの資料では、入口は「外観」の Fonts にあり、新しいバージョンではブロックテーマとクラシックテーマに対応すると説明されています。古いバージョンではサイトエディターのスタイルとタイポグラフィから管理する場合があります。WordPress のバージョンとテーマの対応状況を先に確かめましょう。

フォントライブラリの Upload タブから利用許諾を確認したファイルをアップロードするか、Install Fonts で必要な Google Fonts の書体とバリエーションを選びます。公式資料によると、このインストール処理はフォントをダウンロードしてサイト内から配信します。ただし、別のプラグインが行う外部フォントへのリクエストは個別に確認してください。

インストール後は、必要な本文、見出し、ブロックに適用して保存し、公開ページを確認します。リストに表示されたからといって、全ページで使われているとは限りません。クラシックテーマやページビルダーを使う場合は、書体メニューと全体設定が同じデータを参照しているか確認します。

1. フォントの入手元、ライセンス、必要なバリエーションを記録し、現在のスタイルをバックアップする。
2. 該当するフォントライブラリの入口から追加し、ファイルが一覧にあることを確認する。
3. 代表的なページに先に適用し、公開ページの文字に目的の書体が使われているか確かめる。

CSS が必要なら、宣言と適用を別々に確認する

手動で設定するときは、担当者が継続して管理できるスタイルシートに @font-face を追加し、名前、ファイル URL、太さ、スタイルを指定します。その後 font-family で対象の文字に適用します。宣言だけで使う要素がなければ、画面が変わった証拠にはなりません。更新で上書きされるテーマ本体のファイルを直接編集することも避けます。

ファイルの URL は訪問者から取得可能で、正しい内容を返す必要があります。別ドメインの CDN に移す場合は、クロスオリジンの設定も確認します。ブラウザーのネットワークパネルでファイルが見つからない状態やダウンロード失敗を探し、計算済みスタイルを調べましょう。書体名を当てずっぽうで変え続けても原因は分かりません。

font-display はダウンロード中の文字表示を左右します。swap なら先に代替書体を表示できますが、切り替わったときに改行やレイアウトが変わることがあります。適切な fallback を用意し、フォントを取得できない場合も見出し、ボタン、本文を読めるか試します。

配信場所だけでなく実際のダウンロードを比較する

自サイト配信ではフォント提供元への接続を減らせますが、速度は自分のサーバー、キャッシュ、ファイル容量、転送方式にも左右されます。Google の web.dev も、自サイト配信が外部サービスより必ず速いわけではないと注意しています。分割・圧縮済みの外部フォントを巨大な一つのファイルに置き換えると、かえって遅くなることがあります。

同じページと端末条件で、初回読み込みとキャッシュがある場合をそれぞれ調べます。フォントのリクエスト数、総ダウンロード量、文字が読めるまでの時間、読み込み後の目立つズレを記録します。高度な最適化の前に、重複ダウンロードや不要なウェイトを減らしましょう。

すべてのフォントを preload しないでください。preload は取得を早めますが、重要な画像やスタイルのダウンロードと競合することもあります。特に分割された中国語フォントでは、担当者が本当に必要なファイルを見極めるべきです。先に測定し、対象を決めます。

台湾でよく使う内容で文字欠けとレイアウトを確認する

繁体字中国語の句読点、人名、住所、英語、数字、記号を含む代表的なページを用意し、四角い代替表示、不自然な字形、太さの不一致を探します。日本語など他言語のページがあるなら fallback の組み合わせも確かめます。短いブランドスローガンだけで、フォント全体の適性は判断できません。

スマートフォンでは長い見出しの折り返し、ボタンのはみ出し、表の列幅を確認し、文字を拡大しても読めるか試します。更新が続く記事では文字欠けの報告経路を残し、新しい文字が増えた際はサブセット生成手順も確認します。投稿のたびに慌ててファイルを修正しないで済むようにしましょう。

引き継ぎ時には、ファイルの保存場所、ライセンス、適用範囲、サブセットの生成方法、最後の試験日を記録します。フォントを削除する前に、それを使うスタイルとページを特定し、代替書体を確認してから不要なファイルを消します。見た目と内容の保守を一緒に続けられる形にします。

サイトに合うテーマの選び方

サイトを継続して保守するための確認手順

• チュートリアル
• アプリ・ソフト
• サイト構築・EC
• WordPress