CSS プロパティ @font-face

CSS プロパティ @font-face： ウェブフォントを自由に操る

CSS プロパティ @font-face： ウェブフォントを自由に操る

説明: @font-face ルールを使用すると、Web デザイナーは独自のフォントを Web ページに指定できるため、ユーザーのコンピューターにインストールされているフォントの制約から解放され、Web デザインの自由度とユーザーエクスペリエンスが向上します。

目次

  1. @font-face ルールの文法
  2. フォントフォーマットとブラウザの互換性
  3. src 属性とフォントの読み込み
  4. @font-face ルールの使い方
  5. 注意点とベストプラクティス
  6. よくある質問

@font-face ルールの文法

@font-face ルールの基本的な構文例を以下に示します。この例には、font-family、src、font-style、font-weight、font-display などの属性が含まれています。


@font-face {
  font-family: 'MyCustomFont';
  src: url('my-font.woff2') format('woff2'),
       url('my-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

各属性の意味と一般的な値は次のとおりです。

  • font-family: フォントファミリーの名前を指定します。この名前は、HTML 要素のスタイルを設定するときに使用されます。
  • src: フォントファイルの場所を指定します。url() 関数を使用してフォントファイルへのパスを指定し、format() 関数を使用してフォントの形式を指定します。
  • font-style: フォントスタイルを指定します。一般的な値は、normal、italic、oblique です。
  • font-weight: フォントの太さを指定します。一般的な値は、normal、bold、100、200、300、400、500、600、700、800、900 です。
  • font-display: フォントの読み込みと表示方法を制御します。詳細については、「src 属性とフォントの読み込み」のセクションを参照してください。

フォントフォーマットとブラウザの互換性

一般的な Web フォント形式は次のとおりです。

  • WOFF2
  • WOFF
  • TTF
  • OTF
  • EOT

さまざまなブラウザは、さまざまなフォント形式をサポートしています。最適な互換性を得るには、WOFF2 と WOFF 形式を使用することをお勧めします。次の表は、さまざまなブラウザとフォント形式の互換性を示しています。

フォント形式 Chrome Firefox Safari Edge Opera Internet Explorer
WOFF2 4.0+ 3.6+ 10+ 14+ 12.1+ -
WOFF 6.0+ 3.6+ 5.1+ 12+ 11.1+ 9+
TTF 4.0+ 3.5+ 3.1+ - 10+ 9+
OTF 4.0+ 3.5+ - - 10+ -
EOT - - - - - 6+

出典: https://caniuse.com/webfonts

src 属性とフォントの読み込み

src 属性は、フォントファイルの場所を指定するために使用されます。url() 関数を使用してフォントファイルへのパスを指定し、format() 関数を使用してフォントの形式を指定します。複数の src 属性値を使用して、さまざまなブラウザと互換性のあるさまざまなフォント形式を提供できます。以下に例を示します。


@font-face {
  font-family: 'MyCustomFont';
  src: url('my-font.woff2') format('woff2'),
       url('my-font.woff') format('woff'),
       url('my-font.ttf') format('truetype');
}

font-display 属性は、フォントの読み込みと表示方法を制御するために使用されます。この属性には、次の値を指定できます。

  • auto: ブラウザのデフォルトの動作を使用します。
  • block: フォントが読み込まれて使用可能になるまで、テキストを非表示にします。フォントの読み込みに時間がかかる場合、ユーザーには空白のページが表示される可能性があります。
  • swap: フォントが読み込まれて使用可能になるまで、フォールバックフォントを使用してテキストを表示します。フォントが読み込まれると、すぐに適用されます。
  • fallback: block と似ていますが、フォントの読み込みに時間がかかる場合にのみテキストを非表示にします。
  • optional: フォントがすぐに使用可能な場合にのみフォントを使用します。それ以外の場合は、フォールバックフォントを使用します。

font-display 属性は、Web ページのパフォーマンスを最適化するのに役立ちます。たとえば、font-display: swap を使用すると、フォントの読み込み中にテキストの表示が遅れるのを防ぐことができます。

@font-face ルールの使い方

CSS スタイルシートで @font-face ルールを使用してカスタムフォントを定義する方法の例を次に示します。


@font-face {
  font-family: 'MyCustomFont';
  src: url('my-font.woff2') format('woff2'),
       url('my-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

HTML 要素にカスタムフォントを適用する方法の例を次に示します。


<p style="font-family: 'MyCustomFont', sans-serif;">これはカスタムフォントを使用したテキストです。</p>

注意点とベストプラクティス

  • 合法的にライセンスされているフォントファイルのみを使用してください。
  • Web ページの読み込み速度と視覚効果のバランスをとるために、Web デザインのニーズに基づいて適切なフォントファイルのサイズと形式を選択してください。
  • Google Fonts などのオンラインフォントサービスを使用して、フォントの読み込みと管理を簡素化することをお勧めします。

よくある質問

  1. Q: @font-face ルールはすべてのブラウザでサポートされていますか？
    A: いいえ、すべてのブラウザが @font-face ルールをサポートしているわけではありません。ただし、主要なブラウザのほとんどがサポートしています。ブラウザの互換性については、「フォントフォーマットとブラウザの互換性」のセクションを参照してください。
  2. Q: @font-face ルールを使用して複数のフォントを読み込むことはできますか？
    A: はい、複数の @font-face ルールを使用して複数のフォントを読み込むことができます。各 @font-face ルールは、異なるフォントファミリーを定義する必要があります。
  3. Q: カスタムフォントはどこで入手できますか？
    A: Google Fonts などのオンラインフォントサービスからカスタムフォントを入手できます。また、有料のフォントマーケットプレイスもあります。