CSSの@font-faceルール徹底解説：Webフォントを読み込む基本と書き方

@font-faceルールは、ドキュメント内で使用するフォントフェイス（書体）を詳細に定義するためのCSSの仕組みです。このルールを使うことで、ユーザーの端末にインストールされていないフォントでも、Webサーバー上からダウンロードして表示できるようになります。

また、@font-faceはフォントファイルのダウンロード元（URL）を指定することもできます。ただし、ブラウザや実装環境によっては、扱えるファイルサイズやフォーマットに制限が設けられている場合がある点に注意が必要です。

@font-faceの基本的な構文

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

• font-family： 定義するフォントに付ける名前。HTML側でfont-familyとして参照できます。
• src： フォントファイルの場所。url()で外部ファイルを、local()でローカルにインストール済みのフォントを指定できます。カンマ区切りで複数記述すると、左から順にフォールバックされます。
• format()： フォントの形式（例：truetype、woff2など）を明示します。
• unicode-range： 特定のUnicode文字範囲に対してのみこのフォントを適用したい場合に指定します。

コード例

<style>
<!--
    /* 外部URLからフォントを読み込む例 */
    @font-face {
        font-family: "Scarborough Light";
        src: url("https://www.font.site/s/scarbo-lt");
    }

    /* ローカルフォントを優先し、なければWebフォントへフォールバック */
    @font-face {
        font-family: Santiago;
        src: local("Santiago"),
             url("https://www.font.site/s/santiago.tt")
             format("truetype");
        unicode-range: U+??, U+100-220;
    }
-->
</style>

コードのポイント

1つ目の例では、url()を使って外部サイト上のフォントファイルを直接読み込んでいます。2つ目の例では、まずlocal("Santiago")によってユーザーの端末に同名のフォントがインストールされているかを確認し、存在しない場合にのみWeb上のTrueTypeフォント（.ttf）をダウンロードする構成になっています。

このようにlocal()を先に指定しておくと、不要なダウンロードを避けられるため、ページの表示速度向上にもつながります。

定義したフォントを使用する方法

@font-faceで定義したフォントは、通常のCSSと同じようにfont-familyプロパティで呼び出せます。

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

まとめ

@font-faceは、Webページに独自のフォントを組み込むための基本かつ重要なルールです。フォント名の定義、ファイルの参照先、フォーマット、適用する文字範囲などを柔軟に指定できるため、デザインの自由度を大きく広げることができます。モダンなブラウザではWOFF2形式が推奨されており、軽量かつ高圧縮であることから、実務ではformat("woff2")を併用するのが一般的です。