I. WordPress多言語ウェブサイトのフォント設定チュートリアル：ベストプラクティス
多言語ウェブサイト（例えば、英語、中国語、日本語をサポートする場合）を設計する際、初心者にとってフォント設定は戸惑うポイントかもしれません。フォントはウェブサイトの美観だけでなく、読みやすさやパフォーマンスにも影響を与えます。以下では、2つの一般的な設定方法と実践的な提案を紹介し、最適な選択をサポートします。
II. 単一言語ウェブサイトのフォント設定
日本語のみのウェブサイトの場合、font-family CSSは以下のように設定されることがあります：
日本語ウェブページフォント設定CSSデモ
/* 日本語ウェブページフォント設定CSS */
body {
font-family:
"IBM Plex Sans JP",
"Hiragino Kaku Gothic Pro",
"Meiryo",
"Noto Sans JP",
sans-serif;
}
この設定はサイト全体にフォントを適用します。しかし、サイトが多言語化すると、このような全体設定では柔軟性が不足する可能性があります。英語や中国語など、他の言語にはこれらのフォントが適さない場合があるためです。
III. WordPressサイトを多言語化した後の調整
WP Misuzu（ https://wpmisuzu.com ）ウェブサイトを例に挙げます。このサイトは英語、繁体字中国語、日本語をサポートしています。一般的なWordPress翻訳プラグイン（たとえばPolylangやWPMLなど）を使用し、追加言語を有効にすると、CSSの:lang()擬似クラスが言語タグに基づいて機能します。たとえば、:lang(zh)は中国語ページに対応します。
多言語ウェブサイトでは、言語ごとにフォントを個別に設定し、それぞれに最適なフォントを適用することが推奨されます。wpmisuzu.comでは、以下のように設定されています：
中国語、日本語、英語多言語ウェブページフォント設定CSSデモ
/* 中国語、日本語、英語多言語ウェブページフォント設定CSS */
:lang(zh) {
font-family:
"Noto Sans TC",
"Source Han Sans TC",
"PingFang TC",
"Microsoft JhengHei",
sans-serif;
}
:lang(ja) {
font-family:
"IBM Plex Sans JP",
"Hiragino Kaku Gothic Pro",
"Meiryo",
"Noto Sans JP",
sans-serif;
}
-
- 中国語 (zh): 中国語向けに設計されたフォントを使用。
- 日本語 (ja): 日本語向けに設計されたフォントを使用。
- 英語 (en): :lang(en)での設定は通常不要で、テーマやプラグインのデフォルトフォントを継承。
IV. なぜ英語の:lang(en)をCSSで設定しないのか？
- 英語のデフォルトフォントはテーマやプラグインから継承されるため：多くのWordPressテーマやプラグインは、ArialやRobotoなど英語に適したフォントを既に設定しています。これらのテーマはGoogle Fontsやローカルサーバーからフォントファイルを読み込みます。英語フォントファイルはサイズが小さく（通常0.1～2MB）、強制ダウンロードしてもユーザー体験にほとんど影響を与えません。
- 中国語・日本語フォントのパフォーマンス課題：一方、中国語や日本語フォントでは状況が異なります。たとえば、「Noto Sans TC」（繁体字中国語）や「Noto Sans JP」（日本語）のファイルサイズは10～30MBで、英語フォントの10～100倍です。訪問者にこれらの大容量ファイルを強制的にダウンロードさせると、特にネットワーク環境が悪い場合、サイトの読み込み速度が課題となり、ユーザー体験に影響を及ぼす可能性があります。
V. 2つの設定方法の選択
1. 中国語・日本語フォントの強制ダウンロードを避ける
大容量ファイルのダウンロードを避けたい場合、以下のように設定できます（上記のCSSと同じ）：
大容量ファイルのダウンロードを避けたい場合、以下のように設定できます（上記のCSSと同じ）：
中国語、日本語、英語多言語ウェブページフォント設定CSSデモ
/* 中国語、日本語、英語多言語ウェブページフォント設定CSS */
:lang(zh) {
font-family:
"Noto Sans TC",
"Source Han Sans TC",
"PingFang TC",
"Microsoft JhengHei",
sans-serif;
}
:lang(ja) {
font-family:
"IBM Plex Sans JP",
"Hiragino Kaku Gothic Pro",
"Meiryo",
"Noto Sans JP",
sans-serif;
}
2. Google Fontsからの強制ダウンロード
すべてのデバイスでフォント表示を統一したい場合、Google Fontsからフォントを導入します：
/* Google Fontsからの強制ダウンロード */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&family=IBM+Plex+Sans+JP:wght@400;700&display=swap');
:lang(zh) {
font-family: "Noto Sans TC", sans-serif;
}
:lang(ja) {
font-family: "IBM Plex Sans JP", sans-serif;
}
仕組み：
- Google Fontsの導入：
@importで2つのフォントをGoogle Fontsから読み込みます：- 「Noto Sans TC」：繁体字中国語（:lang(zh)）用。
- 「IBM Plex Sans JP」：日本語（:lang(ja)）用。
wght@400;700はウェイト400（通常）と700（太字）を指定し、display=swapはフォント読み込み時にページのレンダリングがブロックされないよう保証します。
- 言語タグの適用：
- HTMLが<html lang=”zh”>（またはzh_TW）とマークされている場合、:lang(zh)が有効になり、ブラウザが「Noto Sans TC」をダウンロードして適用します。
- <html lang=”ja”>の場合は、:lang(ja)が有効になり、「IBM Plex Sans JP」が適用されます。
- フォールバックメカニズム：
Google Fontsが読み込めない場合（例：ネットワークの問題）、sans-serif（訪問者のデフォルトサンセリフフォント）がフォールバックとして使用され、文字が表示されます。
注意
Google Fonts からのフォントダウンロードが強制されているため、1種類のフォントを設定するだけで十分です。
VI. まとめ：個人的な提案
- 英語はテーマのデフォルトを使用： テーマまたはプラグインから継承され、CSSで特別に設定する必要はありません。
- 中国語・日本語の選択：
- パフォーマンスを重視する場合、1つ目の方法—中国語・日本語フォントの強制ダウンロードを避ける。
- 一貫性を重視する場合、2つ目の方法—Google Fontsでフォントを強制ダウンロード。ただし、必要最低限のウェイト（例：400と700）のみを選択し、過剰なデータ読み込みを防ぐ。
- フォールバックフォントを常に追加： font-familyの最後にsans-serifやserifを加え、文字表示の問題を回避。
- パフォーマンスのテスト： ブラウザの開発者ツールで読み込み時間を確認し、美観と速度のバランスを取る。
個人的には、パフォーマンスを優先する1つ目の方法が好ましいと考えられます。
柔軟な調整
ここで紹介したフォントにこだわる必要はありません。たとえば、「IBM Plex Sans JP」を「Meiryo」に変更するなど、好みやニーズに応じて自由に調整が可能です。
