Webパフォーマンスを向上させるCSSテクニック: 複数フォントウェイトを1つの@font-faceクエリで定義

2024-06-14

CSS で複数のフォントウェイトを 1 つの @font-face クエリで定義する方法

近年、CSS の機能が強化され、1 つの @font-face ルールで複数のフォントウェイトを定義できるようになりました。この方法は、以下の利点があります。

コードの簡潔化: 個別の @font-face ルールを記述する必要がなくなり、コードがより簡潔になります。
メンテナンス性の向上: フォントファミリーを変更する際に、個別に記述されたルールを探す必要がなくなり、メンテナンスが容易になります。
パフォーマンスの向上: 複数のフォントファイルを個別に読み込むよりも、1 つのフォントファイルにまとめることで、HTTP リクエストを削減し、パフォーマンスを向上させることができます。

具体的な記述方法

@font-face ルールを記述する: 以下の例のように、@font-face ルールを記述します。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Regular.woff2') format('woff2'),
       url('MyFont-Regular.woff') format('woff');
  font-weight: 400; /* Regular weight */
}

@font-face {
  font-family: 'MyFont';
  src: url('MyFont-Bold.woff2') format('woff2'),
       url('MyFont-Bold.woff') format('woff');
  font-weight: 700; /* Bold weight */
}

p {
  font-family: 'MyFont', sans-serif;
}

font-weight プロパティでスタイルごとに適切なフォントウェイトを適用する: 太字や薄字などのスタイルを適用する場合は、font-weight プロパティで適切なフォントウェイトを指定します。

h1 {
  font-family: 'MyFont', sans-serif;
  font-weight: 700; /* Bold weight */
}

p {
  font-family: 'MyFont', sans-serif;
  font-weight: 400; /* Regular weight */
}

この方法を使用することで、複数のフォントウェイトを 1 つの @font-face ルールで定義し、コードを簡潔に記述することができます。また、メンテナンス性とパフォーマンスも向上させることができます。

1 つの @font-face ルールで定義できるフォントウェイトの数は、ブラウザによって異なる場合があります。
WOFF 2 フォーマットを使用すると、ファイルサイズを小さくしてパフォーマンスを向上させることができます。
Google Fonts など、様々な Web フォントサービスで、複数のフォントウェイトをまとめたフォントファイルを無料で利用することができます。

/* MyFont というフォントファミリーを定義します */
@font-face {
  font-family: 'MyFont';

  /* Regular weight (400) */
  src: url('MyFont-Regular.woff2') format('woff2'),
       url('MyFont-Regular.woff') format('woff');

  /* Bold weight (700) */
  src: url('MyFont-Bold.woff2') format('woff2'),
       url('MyFont-Bold.woff') format('woff');
}

/* p 要素に MyFont フォントを適用します */
p {
  font-family: 'MyFont', sans-serif;
}

/* h1 要素に太字の MyFont フォントを適用します */
h1 {
  font-family: 'MyFont', sans-serif;
  font-weight: 700;
}

このコードでは、MyFont というフォントファミリーを定義し、Regular (400) と Bold (700) の 2 つのフォントウェイトを指定しています。p 要素には Regular フォントを、h1 要素には Bold フォントを適用します。

この例はあくまでも基本的な例であり、必要に応じて様々なプロパティを追加したり、フォントファイルのパスを変更したりすることができます。

補足説明

上記の例では、WOFF2 フォーマットと WOFF フォーマットのフォントファイルを用意しています。これは、WOFF2 フォーマットがより新しいフォーマットで、ファイルサイズが小さいため、推奨されるためです。しかし、古いブラウザでは WOFF2 フォーマットに対応していない場合があるため、WOFF フォーマットのフォントファイルも用意しておくことで、互換性を保つことができます。
font-weight プロパティは、要素に適用するフォントの太さを指定します。400 は Regular フォント、700 は Bold フォントを表します。この他にも、100 から 900 までの数値でフォントの太さを指定することができます。
font-family プロパティには、要素に適用するフォントファミリーをカンマ区切りで複数指定することができます。この例では、MyFont フォントファミリーが利用できない場合は、sans-serif フォントファミリーを使用することを指定しています。

CSS で複数のフォントウェイトを定義するその他の方法

フォントファミリー名を変更する

各フォントウェイトに対して個別のフォントファミリー名を定義する方法です。この方法は、以下の利点があります。

それぞれのフォントウェイトを個別に制御しやすい。
視覚的に異なるフォントを扱う場合に適している。

@font-face {
  font-family: 'MyFont-Regular';
  src: url('MyFont-Regular.woff2') format('woff2'),
       url('MyFont-Regular.woff') format('woff');
}

@font-face {
  font-family: 'MyFont-Bold';
  src: url('MyFont-Bold.woff2') format('woff2'),
       url('MyFont-Bold.woff') format('woff');
}

この方法を使用する場合は、要素の font-family プロパティに、使用するフォントファミリー名を指定する必要があります。

p {
  font-family: 'MyFont-Regular', sans-serif;
}

h1 {
  font-family: 'MyFont-Bold', sans-serif;
}

@font-feature-settings を使用する

OpenType フォントの場合、@font-feature-settings プロパティを使用して、特定のフォントウェイトのみを有効にすることができます。この方法は、以下の利点があります。

フォントファイルのサイズを小さくできる。
必要のないフォントウェイトをロードしないことで、パフォーマンスを向上させることができる。

@font-face {
  font-family: 'MyFont';
  src: url('MyFont.woff2') format('woff2'),
       url('MyFont.woff') format('woff');
}

p {
  font-family: 'MyFont';
  font-feature-settings: 'feature-tag=wght:400'; /* Regular weight */
}

h1 {
  font-family: 'MyFont';
  font-feature-settings: 'feature-tag=wght:700'; /* Bold weight */
}

この方法を使用するには、フォントファイルが wght フィーチャーに対応している必要があります。また、font-feature-settings プロパティは、すべてのブラウザでサポートされているわけではないことに注意する必要があります。

変数を使用する

コードをより簡潔に記述できる。
フォントファミリーやフォントウェイトを変更しやすい。

:root {
  --font-family: 'MyFont';
  --font-weight-regular: 400;
  --font-weight-bold: 700;
}

@font-face {
  font-family: var(--font-family);
  src: url('MyFont-Regular.woff2') format('woff2'),
       url('MyFont-Regular.woff') format('woff');
  font-weight: var(--font-weight-regular);
}

@font-face {
  font-family: var(--font-family);
  src: url('MyFont-Bold.woff2') format('woff2'),
       url('MyFont-Bold.woff') format('woff');
  font-weight: var(--font-weight-bold);
}

p {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
}

h1 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-bold);
}