Interフォントスタック（フォールバック付き）

Interフォントスタック

InterはRasmus Anderssonがコンピュータ画面用に特別に設計した、無料のオープンソース書体です。GitHub（Primer用）、Vercel、Linear、Stripeなどの企業で使用され、モダンWeb UIの事実上の標準となっています。

宣言

font-family: "Inter", "Inter Fallback", -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, sans-serif;

「Inter Fallback」トリック

Interの読み込み中に**Cumulative Layout Shift（CLS）**を防ぐため、調整済みメトリクスのローカルフォールバックを定義します：

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

Next.js統合

Next.jsはInter統合をシームレスにします：

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  fallback: ['-apple-system', 'BlinkMacSystemFont',
    '"Segoe UI"', 'Roboto', 'Arial', 'sans-serif'],
});

Interの主な機能

• バリアブルフォント：単一ファイルでウェイト100-900（約300KB）
• 光学サイジング：大きいサイズでよりタイトなトラッキング、小さいサイズでよりオープン
• テーブルフィギュア：font-variant-numeric: tabular-nums;で数字の位置揃え
• スラッシュ付きゼロ：font-feature-settings: "zero";で0とOを区別

パフォーマンスのヒント

1. CJKサポートが不要ならラテン文字にサブセットする
2. フォールバックテキストを即座に表示するため**font-display: swap**を使用
3. 重要なテキスト用にWOFF2ファイルをプリロードする
4. 個別のウェイトファイルよりもバリアブルフォントを検討する