タイトル: フォント
SEOタイトル: CSS フォント関連プロパティ完全ガイド（font-family / size / weight / 一括指定 / Web フォント）
| この記事の要点 |
|
CSS フォント関連プロパティ概観
CSS でフォントを指定するプロパティは複数あり、それぞれが文字の種別・サイズ・太さ・スタイル・行間を担当します。本記事では主要なプロパティの使い分けと、Web フォントの導入方法までを整理します。
| プロパティ | 用途 | 例 |
|---|---|---|
font-family | 書体の種類 | "Noto Sans JP", sans-serif |
font-size | 文字サイズ | 16px / 1.2rem / 110% |
font-weight | 文字の太さ | normal / bold / 700 |
font-style | 斜体 / 通常 | italic / normal |
font-variant | スモールキャップス等 | small-caps |
line-height | 行の高さ | 1.5 / 24px |
font | 上記の一括指定 | bold 16px/1.5 sans-serif |
letter-spacing | 字間 | 0.05em |
word-spacing | 単語間 | 0.2em |
text-transform | 大文字小文字 | uppercase |
font-family — 書体の指定
カンマ区切りで複数指定すると、左から順にユーザー環境にインストール済みのフォントを探します。最後に総称ファミリ (sans-serif / serif / monospace) を必ず指定。
/* 日本語サイトの定番 */
body {
font-family:
"Hiragino Sans", /* Mac */
"Yu Gothic", /* Windows */
"Noto Sans JP", /* Web フォント */
sans-serif; /* 最終フォールバック */
}
/* 等幅フォント (コード表示) */
code {
font-family:
"Source Code Pro",
"Consolas",
"Menlo",
monospace;
}フォント名にスペースが含まれる場合はクォートで囲みます。
font-size — 文字サイズ
| 単位 | 意味 | 使いどころ |
|---|---|---|
px | 絶対サイズ | 固定したい部分 |
em | 親要素のフォントサイズ基準 | 相対調整 |
rem | ルート (html) のサイズ基準 | 推奨。ユーザー設定が効く |
% | 親要素基準 | em と同じ |
vw | ビューポート幅基準 | レスポンシブな見出し |
| clamp() | 最小〜推奨〜最大 | 流動タイポグラフィ |
html { font-size: 16px; } /* 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
/* レスポンシブな見出し (320px〜1200px で 24px〜48px) */
h1.fluid {
font-size: clamp(1.5rem, 2vw + 1rem, 3rem);
}font-weight — 太さ
キーワードと数値の両方で指定できます。数値は100〜900 の 100 刻み。
| 数値 | キーワード | 呼び名 |
|---|---|---|
| 100 | - | Thin |
| 300 | - | Light |
| 400 | normal | Regular |
| 500 | - | Medium |
| 700 | bold | Bold |
| 900 | - | Black |
フォントが該当ウェイトを持たない場合、ブラウザが最も近いウェイトで代用するため、細い指定が太く見えることがあります。
font 一括指定
font ショートハンドは複数プロパティを 1 行で指定できますが、順序とサイズが必須。
/* 構文: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family */
body {
font: italic bold 16px/1.5 "Noto Sans JP", sans-serif;
}
/* シンプル版 */
p {
font: 14px sans-serif; /* size と family は必須 */
}注意: 一括指定は指定していないプロパティを初期値にリセットするため、既存の font-weight 等を残したい場合は個別指定の方が安全です。
Web フォントの導入
方法1: Google Fonts (簡単)
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>body {
font-family: "Noto Sans JP", sans-serif;
}方法2: @font-face で自前ホスト
@font-face {
font-family: "MyFont";
src: url("/fonts/MyFont.woff2") format("woff2"),
url("/fonts/MyFont.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap; /* 重要 */
}
body { font-family: "MyFont", sans-serif; }font-display: swap をつけると、フォント読み込み中はシステムフォントで表示し、後で差し替わります。これで FOIT (Flash of Invisible Text = 白画面) を防げます。
FAQ
Q: 日本語 Web フォントは重い
A: 平均 5〜10MB ある。サブセット化（使う文字だけ抽出）か、Adobe Fonts / Google Fonts の動的サブセット (woff2) を使う。
Q: !important が効かないことがある
A: ブラウザの最小フォントサイズ設定が優先される。Chrome は設定 > 外観 > カスタマイズで変更可。
Q: ベンダーフォント名を間違えるとどうなる
A: そのフォントを無視して次の候補へ。必ず総称ファミリ (sans-serif など) で終わらせれば安全。