CSSの@font-faceルールでフォントフェースを定義する方法

Webページで独自のフォントを使用したい場合、CSSの@font-faceルールを利用します。このルールを使うことで、サーバー上に配置したフォントファイルや、ユーザーのローカル環境にインストールされているフォントを指定し、ドキュメント内で自由に呼び出せるようになります。

@font-faceの基本構文

@font-faceルールでは、主に以下のプロパティを指定します。

• font-family: 定義するフォントの名前を指定します。この名前は、後ほど通常のfont-familyプロパティで参照されます。
• src: フォントファイルの場所を指定します。local()でローカルのフォントを、url()でWeb上のフォントファイルを参照でき、format()でフォントの形式（truetype、woffなど）を明示することもできます。
• unicode-range: そのフォントを適用する文字のUnicode範囲を指定できます。これにより、特定の文字だけ別のフォントを使うといった細かい制御が可能になります。

サンプルコード

以下のコードは、@font-faceルールを使ってフォントフェースを定義する実際の例です。

<style>
  <!--
    @font-face {
      font-family: "Scarborough Light";
      src: url("https://www.font.site/s/scarbo-lt");
    }

    @font-face {
      font-family: Santiago;
      src: local("Santiago"),
      url("https://www.font.site/s/santiago.tt")
      format("truetype");
      unicode-range: U+??,U+100-220;
      font-size: all;
      font-family: sans-serif;
    }
  -->
</style>

コードの解説

最初の例では、「Scarborough Light」というフォントをWeb上のURLから読み込むよう定義しています。

2番目の例では、まずlocal()によってユーザーの環境に「Santiago」というフォントがインストールされているかを確認し、存在しない場合はurl()で指定されたWeb上のTrueTypeフォントファイルをフォールバックとして読み込みます。さらにunicode-rangeを指定することで、特定のUnicode文字範囲にのみこのフォントを適用するよう制御しています。

まとめ

@font-faceルールを活用すれば、システムフォントに依存せず、デザインの意図に沿ったタイポグラフィをWebサイト全体で統一的に実現できます。フォントファイルの形式（WOFF、WOFF2など）やunicode-rangeを適切に組み合わせることで、表示品質と読み込みパフォーマンスの両立も可能です。