CSS/@font-face

@font-face

@font-faceルールは、Webページで使用するカスタムフォントを定義するために使用されます。これにより、ユーザーのデバイスにインストールされていないフォントでもWebフォントとして読み込んで利用できます。

概要

@font-faceを使用すると、特定のフォントファイルを指定し、それに名前を付けてCSSで使用可能にします。この方法により、ブラウザがサーバーからフォントファイルをダウンロードして利用します。

書式

@font-faceルールの基本的な書式は以下の通りです：

@font-face {
  font-family: '<フォント名>';
  src: url('<フォントファイルのURL>') format('<フォーマット>');
  font-weight: <フォントの太さ>;
  font-style: <フォントのスタイル>;
  font-display: <フォントの表示方法>;
  unicode-range: <適用する文字範囲>;
}

font-family: フォントに付ける名前。CSSでフォントを指定する際に使用します。
src: フォントファイルの場所を指定します。複数のフォーマットを指定してブラウザ間の互換性を確保することができます。
font-weight: フォントの太さを指定します（例: normal, bold, 100, 400, 700など）。
font-style: フォントのスタイル（例: normal, italic, obliqueなど）。
font-display: フォントの読み込み中にテキストをどのように表示するかを制御します。
unicode-range: フォントが適用される文字範囲を指定します。

使用例

以下は、カスタムフォントを定義する例です：

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

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

この例では、MyCustomFontというカスタムフォントを定義し、フォールバックフォントとしてArialとsans-serifを指定しています。

srcプロパティ

srcプロパティには、複数のフォーマットを指定することで、互換性を高めることができます。一般的なフォーマットには以下のものがあります：

woff2: モダンなブラウザで使用される圧縮フォントフォーマット。
woff: 旧式ブラウザで使用される圧縮フォントフォーマット。
ttf: TrueTypeフォント（一部のブラウザでサポート）。
eot: Internet Explorer用のフォーマット。
svg: 古いiOSデバイス用（非推奨）。

font-displayプロパティ

font-displayプロパティを使用すると、フォントが読み込まれる前のテキストの表示方法を制御できます：

auto: ブラウザのデフォルトの動作に従います。
block: フォントが読み込まれるまでテキストを非表示にし、その後表示します。
swap: フォントが読み込まれるまでフォールバックフォントを表示し、読み込まれたら置き換えます。
fallback: 短時間だけ非表示にし、その後フォールバックフォントを使用します。
optional: フォントがすぐに利用可能でない場合、フォールバックフォントを使用します。

unicode-rangeプロパティ

unicode-rangeプロパティを使用すると、フォントを特定の文字範囲に限定できます。例：

@font-face {
  font-family: 'EmojiFont';
  src: url('emojifont.woff2') format('woff2');
  unicode-range: U+1F600-1F64F; /* 絵文字の範囲 */
}

注意事項

フォントファイルのサイズが大きい場合、読み込み時間が増加する可能性があります。
フォントライセンスに注意してください。商用利用の場合、フォントの使用許諾が必要な場合があります。
フォントが適切にサーバーに配置され、正しいパスで指定されていることを確認してください。

@font-face

概要

書式

使用例

srcプロパティ

font-displayプロパティ

unicode-rangeプロパティ

注意事項

関連情報