CSSの@font-faceルールでフォントのダウンロード場所を定義する方法

CSSの@font-faceルールとは

CSSの@font-faceルールは、ダウンロードして使用するフォントファイルの場所を定義するために使われます。このルールを活用することで、ユーザーのデバイスにインストールされていないフォントでも、Webから取得してページ内で表示できるようになります。

ただし、ブラウザや実装環境によっては、フォントの読み込みに関する制限が存在する場合があるため、注意が必要です。

記述例

以下は、@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;
   }
-->
</style>

コードのポイント解説

• font-family： 定義するフォントに付ける名前を指定します。スタイルを適用する際には、この名前を参照します。
• src： フォントファイルのURLをurl()で指定します。local()を併記すると、端末にすでにインストールされているフォントを優先的に利用し、見つからない場合にのみダウンロードを行うという動作になります。
• format()： フォントの形式（ここでは「truetype」）を明示することで、ブラウザが対応しているかどうかを判断しやすくなります。
• unicode-range： フォントを適用する文字の範囲をUnicodeコードポイントで限定できます。必要な文字だけを読み込むことで、ページの表示パフォーマンス向上が期待できます。

まとめ

@font-faceルールを使えば、フォントファイルの場所を柔軟に定義でき、Webデザインの表現力が大きく広がります。ただし、実装による制限もあるため、woff2やwoffなど複数のフォーマットを用意しておくと、より多くのブラウザで安定した表示を実現できます。