概要

font-family は、HTML要素内の文字に適用するフォントの種類を指定するCSSプロパティです。複数のフォント名をカンマ区切りで指定し、最初に使用可能なフォントが適用されます。

基本的な使い方

See the Pen font-familyについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 複数フォントを指定（フォールバック対応） */
body {
  font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 日本語フォントを含めた指定 */
p {
  font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}

複数のフォントを指定することで、ユーザーの端末に依存せずできる限り意図した表示に近づけることができます。

出力される内容の例

<p style="font-family: 'Helvetica Neue', Arial, sans-serif;">
  この段落は指定されたフォントで表示されます。
</p>

役割とメリット（定義リスト形式）

デザインの統一

ブランドイメージやデザインコンセプトに合ったフォントを選ぶことで、サイト全体の印象を統一できます。

可読性の向上

読みやすいフォントを使用することで、ユーザーの負担を軽減し、内容の理解度を高めます。

フォールバック対応

指定したフォントが使用できない環境でも代替フォントを表示できるため、表示崩れを防げます。

多言語対応

日本語や英語など、言語ごとに適切なフォントを選ぶことで、各国のユーザーに配慮した表示が可能です。

注意点

• 指定したフォントがユーザーの環境にインストールされていない場合、別のフォントに置き換わります。
• 日本語フォントは特にファイルサイズが大きいため、Webフォント利用時は表示速度に注意が必要です。
• フォント名にスペースが含まれる場合は、必ずダブルクォーテーションで囲みます（例："Noto Sans JP"）。
• 汎用フォントファミリー（serif、sans-serif、monospaceなど）は必ず最後に指定します。

まとめ

font-family は、テキストに適用するフォントを制御するための基本プロパティです。デザイン性、可読性、ブランドイメージ、そしてフォールバックの安定性を実現するために重要です。複数フォントを併記し、ユーザー環境への配慮を忘れずに設定しましょう。