CSS @font-face

@font-face は、フォントファイルの場所とその名前をブラウザに伝える CSS の at ルールです。1997 年の IE 4 で最初にサポートされましたが、WOFF が登場し他のブラウザがこのルールを一貫して実装した 2010 年頃まで、クロスブラウザでの実用化は困難でした。

アイコンフォントにとって、@font-face はフォントファイルとアイコンを表示する CSS クラスをつなぐ接着剤です。これなしでは、font-family: 'MyIcons' がサーバーのどの特定のファイルを読み込むべきかをブラウザは知ることができません。

@font-face {
  font-family: 'MyIcons';
  src: url('fonts/myicons.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

font-family ディスクリプタはフォントに後で参照する名前を付けます。src ディスクリプタはブラウザにファイルのダウンロード先とその形式を伝えます。font-weight と font-style ディスクリプタはブラウザが太字やイタリックのバリアントを合成しようとしないようにします。そして font-display はフォントの読み込み中に何を表示するかを制御します。

各 URL の後の format() ヒントは、ブラウザにファイルの形式を伝え、サポートしていない形式をダウンロードせずにスキップできるようにします。ブラウザサポートが向上するにつれて、推奨される形式のセットは大幅に絞り込まれてきました。

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2');
  font-display: swap;
}

97%以上のブラウザカバレッジがあれば、WOFF2 のみでほとんどの現代プロジェクトには十分です。これが最もシンプルで最もパフォーマンスに優れたアプローチです。

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff');
  font-display: swap;
}

WOFF をフォールバックとして追加すると、WOFF2 をサポートしない IE 11 をカバーできます。現代のブラウザは WOFF2 ファイルを取得し、IE 11 は WOFF にフォールバックします。

@font-face {
  font-family: 'MyIcons';
  src: url('myicons.eot');                    /* IE9 互換 */
  src: url('myicons.eot?#iefix') format('embedded-opentype'),
       url('myicons.woff2') format('woff2'),
       url('myicons.woff') format('woff'),
       url('myicons.ttf') format('truetype');
  font-display: swap;
}

完全な「防弾」スタックには、IE 6-8 向けの EOT、現代ブラウザ向けの WOFF2、IE 9-11 向けの WOFF、そして最後のフォールバックとしての TTF が含まれます。ブラウザは各 src エントリを順番に試し、サポートする最初の形式を使用します。このアプローチは極端なレガシー要件を持つプロジェクトにのみ必要です。

アイコンフォントの標準的なパターンは、font-family と共有レンダリングスタイルを設定するベースクラスと、::before 疑似要素の content に各アイコンの Unicode コードポイントを設定する個別アイコンクラスを使用します。

.icon {
  font-family: 'MyIcons';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-home::before { content: '\E001'; }
.icon-search::before { content: '\E002'; }
.icon-user::before { content: '\E003'; }

ベースクラスはフォントスタイルをリセットし、ブラウザがアイコンを歪めるような太字、イタリック、その他の変換を適用しないようにします。-webkit-font-smoothing と -moz-osx-font-smoothing プロパティは macOS と iOS でアンチエイリアスを有効にし、より鮮明なレンダリングを実現します。

各アイコンクラスはそのグリフに割り当てられた Unicode コードポイントを持つ ::before 疑似要素を設定します。バックスラッシュ E 記法（\E001）は、CSS が Unicode 文字を 16 進数コードポイントで参照する方法です。

<i class="icon icon-home"></i>
<span class="icon icon-search"></span>

<i> と <span> はどちらも同様に機能します。要素自体は空で、アイコンは完全に ::before 疑似要素によってレンダリングされます。

font-display ディスクリプタは、フォントファイルのダウンロード中にブラウザが何を表示するかを制御します。これはアイコンフォントにとって重要で、設定が間違っているとページ読み込み中にアイコンが見えなくなる可能性があります。

アイコンフォントにはswap が推奨です。スタイルなしのコンテンツが短時間フラッシュする（アイコンのコードポイントが四角形や空白として見える）ことは、アイコンが全く見えないよりもはるかにましです。block では、低速接続のユーザーがアイコンがあるべき場所を最大 3 秒間空白として見ることになり、ページが壊れているように見えます。swap なら、フォントがロードされるとすぐにアイコンが現れ、現代の接続ではこの切り替えはほとんど知覚されません。

フォントファイルはデフォルトでレンダリングをブロックします——カスタムフォントを使ったテキストをブラウザが描画するには、ファイルのダウンロードを待つ必要があります。影響を最小化するためのテクニックを紹介します：

• フォントファイルをプリロード——<link rel="preload"> を使って、ブラウザがフォントを参照する CSS を解析する前から、できるだけ早くフォントのダウンロードを開始します。
• フォントをセルフホスト——HTML と同じオリジンからフォントファイルを配信することで、余分な DNS ルックアップと接続設定を回避し、CORS の問題もなくなります。
• フォントをサブセット化——未使用のアイコンを削除してファイルサイズを削減します。500 アイコンのうち 50 しか使わないフォントはダウンロードの 90% を無駄にしています。
• unicode-range を使用——複数のアイコンセットがある場合、このディスクリプタはページで指定された範囲の文字が実際に使用されている場合のみ、ブラウザにフォントファイルをダウンロードするよう指示します。

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

同一オリジンのフォントでも crossorigin 属性は必要です——これはフォント読み込み仕様の特殊な要件です。これがないと、ブラウザはフォントを 2 回ダウンロードします。プリロードヒントから 1 回（CORS なし）と @font-face ルールから 1 回（CORS あり）です。

• CORS エラー——別のオリジン（CDN サブドメインなど）から提供されるフォントファイルは、サーバーに Access-Control-Allow-Origin ヘッダーが必要です。または <link> タグに crossorigin 属性を使用します。適切な CORS 設定がないと、ブラウザはフォントを静かにブロックします。
• アイコンが四角形や長方形で表示される——通常、フォントファイルのパスが間違っているか、フォントがまだ読み込まれていないか、アイコンクラスの font-family 名が @font-face 宣言の名前と一致していないことを意味します。ブラウザの「ネットワーク」タブでフォントファイルが 200 ステータスで読み込まれているか確認してください。
• アイコンが間違ったグリフで表示される——システムフォントとの Unicode コードポイントの競合。アイコンフォントが一般的なシステムフォントと重複する範囲のコードポイントを使用している場合、ブラウザはシステム文字をレンダリングする可能性があります。アイコンフォントは通常、これを避けるために私用領域（U+E000〜U+F8FF）を使用します。