Web フォント API のクイックスタート ガイド

Web フォント API のクイックスタート ガイド

fontAPIとは何ですか?

| Web フォント サービス | CDN からフォント ファイルを取得するための CSS <link> または JavaScript スニペットを提供するホスト ライブラリ (GoogleFonts、AdobeFonts など)。| | CSS@font-face | ユーザー エージェントにフォント ファイルのダウンロード場所と CSS に公開するファミリ名を指示する低レベルのブラウザ API。| | 可変フォント API | 1 つのファイルで複数のスタイル (太さ、幅、傾斜など) を公開できる新しい構文 (font-variation-settings、軸範囲)。| | フォント表示記述子 | フォントの読み込み中にテキストをどのようにレンダリングするかを制御します (auto、block、swap、fallback、optional)。| | JavaScript 読み込みヘルパー |フォントをオンザフライで読み込みまたはプリロードするためのオプションのヘルパー (FontFace コンストラクター、document.fonts.load())。|

これらはすべて、フォントを要求して使用するための プログラムによる 方法を公開しているため、「Font API」ファミリーに属しています。

コア CSS 用語

プロパティ / キーワード	意味
font-family	フォントが読み込まれた後に CSS で使用する名前。
src	実際のフォントファイルの URL (.woff2、.woff、.ttf、…)。
unicode-range	特定のファイルでカバーされる文字のサブセット – サブセット化 に最適です。
font-weight / font-style / font-stretch	標準的な静的記述子。
font-variation-settings	変数軸のキー/値ペア ('wght' 400)。
font-display	フォント読み込み中のレンダリングフォールバック戦略。

組み込み CSS@font‑face の使用 (自己ホスト型)

<!-- 1️⃣ Put the font files on your server (or CDN) -->
<link rel="preload" href="/fonts/Inter-Variable.woff2"
      as="font" type="font/woff2" crossorigin>

<style>
  /* 2️⃣ Declare the family */
  @font-face {
    font-family: 'Inter Variable';
    src: url('/fonts/Inter-Variable.woff2') format('woff2');
    /* Optional – load only Latin characters */
    unicode-range: U+0000-00FF;
    /* Show fallback text until the font is ready */
    font-display: swap;
  }

  /* 3️⃣ Use it */
  body {
    font-family: 'Inter Variable', system-ui, sans-serif;
  }
</style>

利点: キャッシュ、ライセンス付与、サブセット化を完全に制御できます。ファイルをバンドルするとオフラインでも動作します。

Googlefonts CSSAPI (最も一般的なパブリック フォント API)

<link href="https://fonts.googleapis.com/css2?
family=Roboto:wght@400;700&
family=Open+Sans:ital,wght@0,400;0,600;1,400&
display=swap"
rel="stylesheet">

説明

パート	機能
family=Roboto:wght@400;700	Roboto の標準および太字のウェイトのみをリクエストします。
family=Open+Sans:ital,wght@0,400;0,600;1,400	OpenSans の標準/セミボールド Roman と標準 italic を読み込みます。
display=swap	フォントの読み込みが完了するまでフォールバックテキストを使用します (UX に推奨)。

次に CSS で次のようにします。

h1 { font-family: 'Roboto', sans-serif; }
p  { font-family: 'Open Sans', sans-serif; }

ヒント

• 複数のファミリーを 1 つのリクエストに結合することで、HTTP ラウンドトリップを削減します。
• 可変フォントには 軸範囲 を使用します: family=Inter:wght@200..800。

バリアブルフォントの例 (Googlefonts)

<link href="https://fonts.googleapis.com/css2?
family=Inter:wght@200..800&display=swap"
rel="stylesheet">

<style>
  .hero {
    font-family: 'Inter', system-ui;
    /* Animate weight from thin → bold */
    font-variation-settings: 'wght' 200;
    transition: font-variation-settings .6s ease;
  }
  .hero:hover { font-variation-settings: 'wght' 800; }
</style>

重要な理由: 1 つのファイルが数十の静的な .woff2 を置き換える → ペイロードが大幅に小さくなります。

JavaScript フォント読み込み API (FontFace)

使用する場合 – ページの読み込み後にフォントを読み込む必要がある場合 (例: SPA ルーティング)、または UI を表示する前にフォントの準備が 完了 するまで待機したい場合。

// Create a FontFace object
const myFont = new FontFace(
  'Custom Serif',
  'url(/fonts/CustomSerif-VF.woff2) format("woff2")',
  { weight: '400 900', style: 'normal' }   // optional descriptors
);

// Add it to the document’s FontFaceSet
document.fonts.add(myFont);

// Start loading
myFont.load().then(() => {
  // Font ready → apply it
  document.body.style.fontFamily = '"Custom Serif", serif';
}).catch(err => console.error('Font failed', err));

どのフォントがロードされているかをクエリすることもできます。

document.fonts.ready.then(() => console.log('All fonts ready'));

AdobeFonts (Typekit) – 別のパブリック フォント API

<link rel="stylesheet" href="https://use.typekit.net/xyz123.css">

次に、キットにリストされているとおりにファミリを正確に参照します。

h2 { font-family: "adobe-caslon-pro", serif; }

Googlefont との主な違い

• Adobe アカウントと埋め込みキット ID (xyz123) が必要です。
• sync および async 読み込みオプション (<script>… Typekit.load(); </script>) を提供します。

パフォーマンスのベストプラクティス

1. サブセットにはグリフのみが必要です – unicode-range または Google Fonts の text= パラメータを使用します。

2. 重要なフォントには「プリロード」を活用します:

<link rel="preload" href="/fonts/Inter-Variable.woff2"
      as="font" type="font/woff2" crossorigin>

3. font-display を少なくとも swap に設定します。
   CLS (Cumulative Layout Shift) に悪影響を与えるテキストのレンダリングを「ブロック」しないでください。

4. GoogleFonts または AdobeFonts を使用する場合は、ファミリーを 1 つのリクエストに結合します。

5. 永久キャッシュ – ほとんどの CDN は、woff2 ファイルに対して将来の「Cache‑Control」ヘッダーを送信します。

クイックリファレンスチートシート

API	リクエスト方法	一般的な使用例
CSS @font-face	<style>@font-face{…} + オプションの <link rel="preload">	セルフホストフォント、フルコントロール
Google Fonts CSS API	<link href="https://fonts.googleapis.com/css2?...">	シンプルな URL パラメータを使用した無料フォント
Adobe Fonts (Typekit)	<link href="https://use.typekit.net/xxxx.css">	デザインシステム統合機能を備えた有料ライブラリ
FontFace JS API	new FontFace(name, src[, descriptors])	SPA / ランタイムバンドルでの動的読み込み
可変フォント軸範囲	family=Inter:wght@200..800 または CSS font-variation-settings	ファイル数を削減し、スムーズなウェイト遷移を実現

TL;DR コード サンプル – ほとんどのプロジェクトのワンライナー

<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
      rel="stylesheet">
<style>
  body {font-family:'Montserrat',Arial,sans-serif;}
</style>

✅ 標準と太字のウェイトのみを読み込み → ダウンロードサイズが小さい。 ✅ display=swap により、フォールバックテキストが高速化 → 優れた UX を実現。 ✅ 追加の JavaScript なしで、すべての最新ブラウザで動作します。

---

アポーズはどうですか？

サーバー側でフォント ファイルを操作または変換する必要がある場合 (サブセットの生成、TTF/WOFF2 間の変換、グリフ メトリクスの抽出など)、Aspose.Font ライブラリは .NET、Java、Python 用のプログラム API を提供します。これをビルド パイプラインまたはバックエンド サービスに統合して、上記のフォント API のいずれかを介して提供される前にフォント アセットを準備できます。

---

埋め込む準備はできましたか?

上記のスニペットのいずれかを HTML/CSS/JS にコピーすると、数秒で本番環境に対応した Font API 統合が完成します。ハッピースタイリング！