CSSのフォント指定：font-familyの使い方を簡単に解説

CSSのfont-familyプロパティは、ウェブページのテキストの表示に使われるフォントを指定するためのプロパティです。

以下では、font-familyプロパティの基本的な使い方を簡単に解説します。

特定のフォントを指定する方法

フォントを指定するには、そのフォント名をfont-familyプロパティに指定します。

例えば、次のように指定します。

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

上記の例では、最初にArialというフォントを指定し、もしArialが利用できない場合は、代替としてsans-serifフォントを使用します。

フォールバックオプションの設定

異なる環境やブラウザでフォントが利用できない場合に備えて、複数のフォントを指定することが重要です。

これをフォールバックオプションといいます。

次の例では、Arialが利用できない場合にはHelvetica、さらにそれも利用できない場合にはsans-serifフォントを使用します。

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

ウェブフォントの使用

ウェブフォントは、特定のフォントをブラウザにダウンロードさせることができる方法です。

通常、ユーザーのブラウザからフォントをダウンロードして表示するため、特定のフォントがインストールされていなくても正しく表示することができます。

以下に、ウェブフォントの使用方法を簡単に説明します。

ウェブフォントの取得

まず最初に、ウェブフォントを取得する必要があります。

一般的な方法は、ウェブフォントプロバイダーサービス（例: Google Fonts、Adobe Fonts、Typekitなど）からウェブフォントをダウンロードすることです。

これらのサービスは、多くのフォントファミリーを提供しており、利用規約に基づいてウェブサイトで使用することができます。

フォントのインポート

ウェブフォントを使用するためには、CSSでフォントをインポートする必要があります。

一般的な方法は、CSSファイルのヘッダーに@font-faceルールを追加することです。
@font-faceルールには、フォントファミリー名、フォントファイルへのパス、およびフォントの形式（TrueType、OpenType、WOFFなど）を指定します。

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.ttf') format('truetype');
}

フォントの適用

ウェブフォントを適用するには、font-familyプロパティを使用して指定します。
ウェブフォントを使用する場合、フォントファミリー名に@font-faceルールで指定した名前を使用します。

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

上記の例では、'Open Sans'というウェブフォントを指定し、もしウェブフォントが利用できない場合には、代替としてsans-serifフォントが使用されます。

ウェブフォントの最適化

ウェブフォントのファイルサイズはパフォーマンスに影響を与えるため、フォントファイルを最適化することが重要です。

圧縮されたフォントファイルフォーマット（WOFFやWOFF2）を使用するか、必要な文字セットのみを含むようにフォントをサブセット化することが推奨されます。

クロスブラウザの互換性

一部の古いブラウザでは、一部のウェブフォントフォーマットがサポートされていない場合があります。

そのため、ウェブフォントを使用する際には、クロスブラウザの互換性に注意する必要があります。主要なブラウザでの動作を確認し、適切なフォールバックオプションを提供することが重要です。

以下は、ウェブフォントのクロスブラウザの互換性を考慮したフォント指定の例です。

@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
       url('fonts/OpenSans-Regular.woff') format('woff'),
       url('fonts/OpenSans-Regular.ttf') format('truetype');
}

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

上記の例では、WOFF2形式がサポートされている場合はそれを優先して使用し、サポートされていない場合にはWOFF、さらにそれもサポートされていない場合にはTrueType形式のフォントを使用します。

フォントのスタイルとバリエーション

font-familyプロパティは、フォントのスタイルやバリエーションも指定することができます。

例えば、次のようにイタリック体のフォントを指定することができます。

body {
  font-family: "Arial Italic", sans-serif;
}

まとめ

今回は、CSSのfont-familyプロパティについて解説しました。

CSSのfont-familyプロパティを使うことで、ウェブページのテキストの表示に適切なフォントを指定できます。

是非参考にしてみてください。