ウェブサイト用の 12 の多言語フォント: スクリプトによる無料ピック

複数のスクリプトをカバーする 12 個の無料 Web フォント。それぞれの正確な範囲、CSS フォント スタックのセットアップ、新しい言語を起動する前にフォントをテストするためのチェックリストが含まれています。
始める
ツアーに参加してください
クレジットカード不要 契約義務なし

・ 更新 · アレックスB · ブログ

この投稿を次のように要約します: 9分で読めます
ChatGPT チャットGPT Perplexity 困惑 Grok グロック Google AI Google AI

すべての言語を適切にカバーする単一の Web フォントはありません。最も近いのはGoogleの 能登 このプロジェクトは “1,000 以上の言語と 150 以上の文字体系”をカバーしていますが、文字ごとに個別のファミリーとして出荷されます。ほとんどの多言語 Web サイトでは、実用的な答えは、ラテン語、キリル文字、ギリシャ語のテキスト用の 1 つのメイン フォントと、アラビア語、ヘブライ語、デーヴァナーガリー語、タイ語、CJK 用のスクリプト固有のフォールバック（Noto または一致するファミリー）です。

以下は、複数のスクリプトを処理する 12 個の無料フォントで、それぞれがサポートする正確なスクリプトと、新しい言語を起動する前に実行できる CSS セットアップとテスト ルーチンが続きます。

主なポイント

  • チェック スクリプト“言語数”ではありません。フォントにアラビア語のグリフがない場合は、ラテン文字言語をいくつリストしても問題ありません。
  • 欠落しているグリフは、空のボックス (“tofu”) または不一致のシステム フォントとして表示されます。ネイティブの読者にはどちらも壊れているように見えます。
  • を構築します フォントスタック: 最初にブランド フォント、次にスクリプト固有のフォント、次に汎用ファミリ。ブラウザは文字ごとに選択します。
  • 必要な場合にのみ、CJK やその他の大きなフォントを読み込みます。Googleフォントはすでにそれらを小さなものに分割しています unicode-range スライス。
  • 訪問者向けにオンにする前に、実際のページ上のすべての言語を実際のサイズでテストしてください。

これらのフォントをどのように選択してチェックしたか

12 個のフォントはすべて無料で使用でき、Google フォントで利用できます。それぞれにリストされているスクリプト カバレッジは、2026 年 9 月 27 日にチェックされた Google Fonts ファミリのメタデータからのものです。“ラテン語”には、ほとんどのヨーロッパ言語、リストされているトルコ語とベトナム語をカバーする拡張ラテン語セットが含まれます。

プレミアムフォントは省略しました。Helvetica World や Frutiger などの有料ファミリーは優れていますが、言語サポートと価格はライセンスとベンダーによって変更されるため、鋳造工場に直接確認する必要があります。

12 の多言語フォント

1。能登三

スクリプト: ラテン語、キリル文字、ギリシャ語、デーヴァナーガリー語、ベトナム語。コンパニオンファミリーは、アラビア語、ヘブライ語、タイ語、JP、KR、SC（簡体字中国語）、TC（繁体字中国語）など、他のほぼすべてのものをカバーします。

幅が必要な場合は、能登 (“no tofu” の略）がデフォルトの選択肢です。の 能登プロジェクト これをコレクション “1,000 以上の言語と 150 以上の書記体系”として説明し、フォントは SIL Open Font License に基づいてリリースされます。すべてのスクリプト ファミリは連携して動作するように設計されているため、Noto はこのリストにある他のフォントに比べて最も安全なフォールバックでもあります。

2。ノトセリフ

スクリプト: ラテン語、キリル文字、ギリシャ語、ベトナム語、および数学の記号。

このセリフは、独自の文字コンパニオン（Noto Serif JP、伝統的なアラビア語のスタイルを表す Noto Naskh Arabic など）を備えた Noto Sans のパートナーです。あらゆる言語で本のような雰囲気を求める編集サイトに適しています。

3。オープンサンズ

スクリプト: ラテン語、キリル文字、ギリシャ語、 ヘブライ語、 ベトナム語。

Steve Matteson のヒューマニスト サンズは、長年にわたって Web の定番となっています。ヘブライ語のサポートがこのリストにある理由です。人気のあるラテン語フォントにはこのフォントがほとんど含まれていません。これは、1 つのファミリーから英語、ロシア語、ギリシャ語、ヘブライ語が必要なサイトにとって、ソリッド ボディ テキストの選択です。

4。ロボト

スクリプト: ラテン語、キリル文字、ギリシャ語、ベトナム語。

Android のシステム フォント。Christian Robertson によってデザインされました。訪問者はすでにそれを知っており、多くの重みと可変バージョンがあり、カバーされていないスクリプトについては Noto ときれいにペアリングされます。

5。インター

スクリプト: ラテン語、キリル文字、ギリシャ語、ベトナム語。

Rasmus Andersson は画面用に Inter を設計し、ボタン、ラベル、テーブルなどの小さな UI テキストで表示します。サイトがアプリまたはダッシュボードの場合、Inter plus Noto フォールバックは強力な組み合わせです。

6。ソース Sans 3

スクリプト: ラテン語、キリル文字、ギリシャ語、ベトナム語。

Adobe の最初のオープンソース ファミリ、Paul D。Hunt 著。中立的で、長いテキストで非常に読みやすく、Source Han Sans とスタイル的によく一致しており、Adobe が Google と共同で開発し、Google が Noto Sans CJK として出荷する CJK デザインです。

7。フィラ サンズ

スクリプト: ラテン語、キリル文字、ギリシャ語、ベトナム語。

Carrois Apostrophe が Mozilla のためにデザインしました。ロボトやインテルよりも少し個性があり、サイトにコードが表示されている場合は、一致するフィラ モノを使用します。

8。モントセラト

スクリプト: ラテン語、キリル文字、ベトナム語。 ギリシャ語はありません。

見出しに人気。これは、カバレッジ ラインを読むことを思い出させるためにここにあります。Montserrat は英語、ドイツ語、ポーランド語、ロシア語、ウクライナ語で機能しますが、ギリシャ語のページは見出しの中央の別のフォントに戻ります。

9。IBM Plex Sans（およびそのスクリプト コンパニオン）

スクリプト: Plex Sans はラテン語、キリル文字、ギリシャ語、ベトナム語をカバーします。別々の家族が追加します アラビア語、ヘブライ語、デーヴァナーガリー語、タイ語、日本語、韓国語.

IBM Plex は、Noto に次いで最も完全な “1 つのシステムとして設計された”オプションです。各コンパニオンは Plex のプロポーションとトーンを共有しているため、アラビア語のページと英語のページは同じブランドのように感じられます。

10。ルービック

スクリプト: ラテン語、キリル文字、 ヘブライ語、アラビア語.

少し丸みを帯びていてフレンドリーです。ヘブライ語とアラビア語、ラテン語、キリル文字の両方をカバーする数少ない単一家族の 1 つであり、中東のサイトに便利です。

11。カイロ

スクリプト: アラビア語、ラテン語。

ラテン語セットと一致する現代アラビア語の家族。アラビア語のページが優先され、アラビア語のテキスト内の英語の単語（ブランド名、製品コード）を一致させたい場合に役立ちます。

12。能登三 JP、SC、TC、KR

スクリプト: 日本語、簡体字中国語、繁体字中国語、韓国語がそれぞれラテン語とキリル文字で書かれています。

中国語、日本語、韓国語のフォントには数千文字が含まれているため、ファイル サイズが本当の問題です。Google Fonts はそれらを小規模に提供します unicode-range チャンクがあり、ブラウザはページに必要なチャンクのみをダウンロードします。言語に一致するファミリーを使用してください。日本語と中国語は多くの文字を共有していますが、描画方法が異なり、読者もそれに気づきます。

ラテン語のみのお気に入りについての簡単な警告: たとえば、Lato では、Google フォントにラテン語とラテン拡張のみが表示されます。多くのブランドフォントは同じです。スタックに公開する他のすべてのスクリプトのフォールバックがある限り、それは問題ありません。

多言語フォントスタックの設定方法

ブラウザは文字ごとにフォントを選択します。最初のフォントが入っている場合 font-family グリフがないので、次のグリフを試します。それを意図的に使うことができます:

body {
  font-family: 'Inter', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans JP', system-ui, sans-serif;
}

より適切に制御するには、言語ごとにフォントを設定します :lang() セレクタ。ページが <html lang="…"> 属性は、表示されている言語に対して正しいです:

:lang(ar) body {
  font-family: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
}
:lang(he) body {
  font-family: 'Open Sans', 'Noto Sans Hebrew', sans-serif;
}
:lang(ja) body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.8;
}
:lang(th) body {
  font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
  line-height: 1.9;
}

後で時間を節約できる 3 つの詳細:

  • 線の高さ。 タイ語、デーヴァナーガリー語、アラビア語には文字の上下にマークが付いています。英語に合わせて調整されたラインの高さでクリップできます。それらの言語にもっと余地を与えてください。
  • 太字と斜体。 多くのスクリプトには真の斜体がありません。強調のために斜体に依存する場合は、それらの言語に対して別のスタイル（重みまたは色）を選択してください。
  • セルフホスティング。 フォントを自分でホストする場合は、 を保持します unicode-range コピー時の記述子 @font-face ルール。の Unicode 範囲の MDN リファレンス 構文を示します。

言語を起動する前にフォントをテストする方法

  1. 非表示またはステージング状態で言語をオンにします そして、ホーム、製品または価格ページ、長い記事、フォーム、チェックアウトまたはサインアップの 5 つの最も重要なページをロードします。
  2. 豆腐とフォントの切り替えを探してください。 空の長方形は明らかです。見出しの途中で文字の形が突然変化すると、見逃しやすくなり、フォントが後退してしまいます。
  3. 小さなテキストを確認してください。 モバイル サイズのフッター、フォーム ラベル、テーブル セル、ボタン。複雑なスクリプトは、英語に適したサイズを下回ると読みにくくなります。
  4. テキストの長さを確認します。 翻訳されたテキストは長いことがよくあります。W3Cの 翻訳におけるテキストサイズに関する記事 IBM のガイダンスでは、短い英語の文字列（最大 10 文字）はヨーロッパの言語では 200% から 300% 増加する可能性があると述べています。ボタンとメニューが最初に壊れます。
  5. 方向を確認してください。 アラビア語、ヘブライ語、ペルシア語については、レイアウトミラーが正しく、テキスト内の数字とラテン語の単語が依然として正しく読めることを確認してください。へのガイド RTLデザイン レイアウト側をカバーします。
  6. ネイティブの読者に聞いてください。 流暢な話者は、間違った地域のグリフ（中国語と日本語によくある）を数秒で発見します。

ConveyThis がテスト ステップにどのように役立つか

ConveyThis サイトのテキストを翻訳し、ページを設定します lang 表示されている言語に属性があるため、 :lang() 上記のルールは自動的に適用されます。言語スイッチャーを通じてすべての言語をプレビューし、ぎこちない文言を修正できます ビジュアルエディター ページ自体で、フィットしなくなったボタンラベルをキャッチする最も簡単な方法です。文字列がデザインに対して長すぎる場合は、そこで翻訳を編集するか、用語集を使用して短い用語を一貫して使用してください。

ConveyThis が行わないことは、フォントを選択またはロードすることです。フォント スタックはテーマの CSS に残ります。計画と言語の制限は、にあります 価格設定ページ、 ConveyThis は 210 の言語をサポートしているため、新しいスクリプトを追加する前にフォント カバレッジを確認する価値があります。

よくある質問

すべての言語をサポートするフォントは何ですか？ 単一のフォント ファイルではそうではありません。Google の Noto ファミリが最も近く、スクリプトごとに別のファミリが連携して動作するように設計されています。

フォントにおける “豆腐” とは？ フォントに文字のグリフがない場合にブラウザが描画する空の四角形。能登の名前は“豆腐なし”に由来しています。

言語ごとに 1 つのフォントを使用する必要がありますか？ 公開するすべてのスクリプトを真にカバーしている場合に限ります。それ以外の場合は、ラテン語のテキストにはブランド フォントを使用し、残りには一致するフォールバックを使用します。

多言語フォントは私のサイトの速度を低下させますか？ 特に CJK フォントではそれが可能です。使用する重みのみをロードし、保持します unicode-range サブセット化、および使用 font-display: swap フォントの読み込み中にテキストが表示されます。

新しい言語、フォントなどでサイトを見る準備はできていますか？ ConveyThis アカウントを作成します 翻訳を公開する前に、自分のページでプレビューしてください。

シェア:
G2 High Performer Spring 2023
G2 Easiest Setup Fall 2024
G2 Best Support Spring 2025