Widely available 安全に使用可能。すべての主要ブラウザで長年サポート済み。WOFF2 形式を優先的に使用すること。
タイポグラフィ Widely available

@font-face

@font-face を使うと、サーバー上のフォントファイルを指定してブラウザにダウンロードさせ、CSS で利用できる。WOFF2 が最も圧縮効率が高く推奨される形式。複数の形式を指定することで幅広いブラウザに対応可能。

フォントWeb フォント

概要

@font-face を使うと、サーバー上のフォントファイルを指定してブラウザにダウンロードさせ、CSS で利用できる。WOFF2 が最も圧縮効率が高く推奨される形式。複数の形式を指定することで幅広いブラウザに対応可能。

対応ブラウザ

デスクトップ

Chrome 36+
Edge 14+
Safari 10+
Firefox 39+

モバイル

Chrome Android 36+
Safari iOS 10+
Firefox Android 39+

基本構文

CSS 
@font-face {
  font-family: "MyFont";
  src: url("/fonts/myfont.woff2") format("woff2"),
       url("/fonts/myfont.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "MyFont", sans-serif;
}

実務での使いどころ

  • ブランドフォントの適用

    企業やプロジェクト固有のフォントをウェブサイト全体に統一して使用できる。

  • 多言語対応

    特定の言語に最適化されたフォントを読み込み、各言語の文字を美しく表示する。

注意点

  • フォントファイルのサイズが大きいとページの読み込み速度に影響するため、必要なウェイトとサブセットのみ読み込むこと。
  • FOIT（Flash of Invisible Text）を避けるため font-display を併用すること。

アクセシビリティ

  • フォントが読み込まれない場合でもテキストが読めるよう、適切なフォールバックフォントを指定する。

参考リンク