font-familyプロパティは、テキストのフォントを指定するためのプロパティです。複数のフォントを指定しておき、指定したフォントが利用できない場合は、次のフォントが使用されるフォールバックメカニズムがあります。
font-familyの値とその効果の一覧
- serif: セリフ（文字の端に装飾があるフォント）を持つフォント。
- sans-serif: セリフがない、シンプルなフォント。
- monospace: 等幅フォント。全ての文字が同じ幅で表示されます。
- cursive: 手書き風のフォント。
- fantasy: 装飾的なファンタジーフォント。
注意点と関連情報
フォントの指定はユーザーの環境に依存するため、複数のフォントをカンマで区切って指定し、代替フォントを用意することが推奨されます。システムによってインストールされているフォントが異なるため、フォールバックとして一般的なフォントファミリ（serifやsans-serifなど）を指定しておくのが一般的です。
font-familyプロパティが効かない時の原因と対策
フォントがインストールされていない
font-familyプロパティで指定されたフォントが、ユーザーのデバイスにインストールされていない場合、そのフォントは適用されず、代替フォントが使用されます。
対策: フォントがユーザーのデバイスにインストールされていることを前提とするのではなく、Webフォント（Google FontsやAdobe Fontsなど）を使用するか、フォントスタックを設定して、フォントが使用できない場合の代替フォントを指定しましょう。
フォント名が間違っている
フォント名が正確に指定されていない場合、font-familyプロパティは無視され、ブラウザは代替フォントを使用します。特に、スペースを含むフォント名（例: “Times New Roman”）はクォーテーションマークで囲む必要があります。
対策: フォント名が正しく指定されているか確認し、必要に応じてクォーテーションマークで囲むようにします。例えば、font-family: "Times New Roman", serif;と正確に記述しましょう。
共通するCSSコード
.css-sample-container {
padding: 20px;
border: 1px solid #ccc;
margin-bottom: 20px;
width: 300px;
background-color: #f9f9f9;
text-align: center;
}
.css-sample-font {
font-size: 24px;
}font-family: ‘Times New Roman’, serif
セリフフォントの一例で、文字の端に装飾があります。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-serif">セリフフォントの例</p>
</div>CSSコード
.css-sample-font-serif {
font-family: 'Times New Roman', serif;
}表示結果
セリフフォントの例
font-family: ‘Arial’, sans-serif
サンセリフフォントの一例で、シンプルな文字デザインです。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-sans-serif">サンセリフフォントの例</p>
</div>CSSコード
.css-sample-font-sans-serif {
font-family: 'Arial', sans-serif;
}表示結果
サンセリフフォントの例
font-family: ‘Courier New’, monospace
等幅フォントの例で、全ての文字が同じ幅で表示されます。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-monospace">等幅フォントの例</p>
</div>CSSコード
.css-sample-font-monospace {
font-family: 'Courier New', monospace;
}表示結果
等幅フォントの例
font-family: ‘Brush Script MT’, cursive
手書き風フォントの例で、曲線的なデザインが特徴です。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-cursive">手書き風フォントの例</p>
</div>CSSコード
.css-sample-font-cursive {
font-family: 'Brush Script MT', cursive;
}表示結果
手書き風フォントの例
font-family: ‘Impact’, fantasy
装飾的なファンタジーフォントの例で、ユニークでインパクトのあるデザインです。
HTMLコード
<div class="css-sample-container">
<p class="css-sample-font css-sample-font-fantasy">ファンタジーフォントの例</p>
</div>CSSコード
.css-sample-font-fantasy {
font-family: 'Impact', fantasy;
}表示結果
ファンタジーフォントの例
まとめ
- font-familyはテキストのフォントを指定するプロパティで、複数のフォントを指定し、利用できない場合の代替フォントも指定できます。
- 代表的なフォントファミリには、serif、sans-serif、monospace、cursive、fantasy などがあります。
- フォント指定は環境依存のため、代替フォントを必ず指定して、見た目の一貫性を確保することが重要です。