font-family
テキストの書体を指定するCSSの最も基本的なフォントプロパティです。複数のフォント名をカンマ区切りで指定し、利用可能なフォントが見つかるまで順に試行するフォールバック機構を持ちます。serif、sans-serif、monospaceなどの総称ファミリー名を最後に指定することで、確実にテキストが表示されます。
概要
テキストの書体を指定するCSSの最も基本的なフォントプロパティです。複数のフォント名をカンマ区切りで指定し、利用可能なフォントが見つかるまで順に試行するフォールバック機構を持ちます。serif、sans-serif、monospaceなどの総称ファミリー名を最後に指定することで、確実にテキストが表示されます。
対応ブラウザ
デスクトップ
Chrome 1+
Edge 12+
Safari 1+
Firefox 1+
モバイル
Chrome Android 18+
Safari iOS 1+
Firefox Android 4+
基本構文
CSS
body {
font-family: "Noto Sans JP", "Hiragino Sans",
sans-serif;
}
code {
font-family: "Fira Code", monospace;
}実務での使いどころ
-
日本語フォントスタックの設定
Webフォントを優先しつつ、OS標準の日本語フォントをフォールバックに設定し、あらゆる環境で美しいテキスト表示を実現します。
注意点
- スペースを含むフォント名は引用符で囲む必要があります。また、フォールバックの最後には必ず総称ファミリー名を指定してください。
アクセシビリティ
- 読みやすいフォントを選択し、cursiveやfantasyなどの装飾的なフォントは見出し程度に限定してください。