【CSS Modules】@font-faceアットルールの使い方

@font-faceインターフェースは、Webページでカスタムフォントを使用できるように定義するためのインターフェースです。このインターフェースを利用することで、閲覧者の環境に依存せず、Webデザイナーが意図したフォントをWebサイトに適用することが可能になります。具体的には、Webサーバーに配置されたフォントファイルを指定し、そのフォントがWebページ上でどのように使用されるか（例：フォントに割り当てる名前、スタイル、太さなど）をブラウザに伝える役割を担います。

@font-faceブロック内には、必須となるfont-familyプロパティでカスタムフォントに任意の名前を割り当て、srcプロパティでフォントファイルへのURLパスを指定します。srcプロパティには、異なる形式のフォントファイルを複数指定することで、主要なブラウザやデバイスでの幅広い互換性を確保できます。その他、font-weightやfont-styleなどのプロパティを用いて、定義するフォントの特性を詳細に設定することが可能です。

@font-faceで定義したフォントは、その後、CSSの他のセレクタ内でfont-familyプロパティに指定したフォント名を記述することで、HTML要素に適用されます。これにより、画像としてテキストを扱う場合に比べて、テキストの選択・コピー、検索エンジンのインデックス作成、アクセシビリティの向上といった多くの利点が得られます。Webサイト全体の視覚的な一貫性とブランドイメージの維持にも大きく貢献しますが、利用するフォントファイルの著作権やライセンスについては十分に注意し、適切な使用許諾を得て利用することが重要です。

Copy
1@font-face {
2  font-family: "MyCustomFont";
3  src: url("path/to/my-custom-font.woff2") format("woff2");
4}

引数なし

引数はありません

戻り値なし

戻り値はありません