フォントファミリー（font-family）プロパティ

最終更新：2026-09-13

font-family フォントファミリー（font-family）プロパティ

font-family プロパティは、要素に適用するフォントファミリー名や汎用フォントファミリー名の優先リストを指定します。ブラウザはリストの中から最初に利用可能なフォントを使用し、フォントが見つからない場合は順に後続のものへ移ります。

カテゴリ
初期値	depends on user agent
継承	はい
適用対象	all
アニメーションタイプ	discrete
CSS バージョン	CSS1
状態	標準

📝 構文

font-family: [ <family-name> | <generic-family> ]#;

⚙️ 値

値	タイプ	説明
`<family-name>`	タイプ	特定のフォントファミリー名（例: 'Microsoft YaHei'）
`<generic-family>`	キーワード	汎用フォントファミリー: serif、sans-serif、monospace

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
font-family	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

ヒント： スペースや特殊文字を含むフォント名は引用符で囲む必要があります（例: "Times New Roman"）。

重要： リストの末尾には必ず汎用フォントファミリー（serif、sans-serif、monospace）を最終的な代替として書いてください。

❓ よくある質問

Q中国語のウェブサイトではどのフォントを使うべきですか？

A一般的なクロスプラットフォームの代替チェーンは "PingFang SC"、"Microsoft YaHei"、sans-serif です。英語向けには先頭に Helvetica や Arial を加えてもよいです。Windows では Microsoft YaHei が、macOS では PingFang SC が選択され、末尾の汎用 sans-serif がどの環境でもテキストを確実に表示することを保証します。

QCSS で @font-face ルールを使ってカスタムウェブフォントを読み込むにはどうすればよいですか？

Aまず @font-face でフォントを宣言します。例: @font-face { font-family: 'MyFont'; src: url('myfont.woff2') format('woff2'); }。その上で font-family のリストに 'MyFont' を含めます。ファイルサイズを抑えるため woff2 形式を推奨し、リスト末尾には汎用フォントファミリーを代替として残してください。

Qfont-family の複数の値の順序は重要ですか？

Aはい。ブラウザはリストを左から右へ確認し、最初にインストールされているフォントを使用します。リストの後ろのフォントは、それより前のフォントが利用できない場合にのみ使われます。リストは優先度順に並べ、最後は汎用フォントファミリー（serif、sans-serif、monospace）で締めてください。