2026年4月16日
CSS フォントの変え方：font-familyとは？
ウェブページの文字の見た目を変えるには、CSS フォントの変え方を知る必要があります。フォントとは「文字のデザイン」のことです。
font-family（フォントファミリー）プロパティを使うと、ページで使うフォントを指定できます。
body {
font-family: sans-serif; /* ゴシック体 */
}
h1 {
font-family: serif; /* 明朝体 */
}フォントの種類
| 値 | 特徴 |
|---|---|
sans-serif | ゴシック体。画面で読みやすい。ウェブで最もよく使われる |
serif | 明朝体。文字の端に飾りがある。印刷物向き |
monospace | 等幅フォント。コードの表示に使われる |
複数のフォントをカンマで区切って指定すると、最初のフォントが使えない場合に次のフォントが使われます。
body {
font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif;
/* 左から順に試し、最後は汎用フォント */
}💡 hoverで動きをつける方法で基礎を確認できます。
Google Fontsを使う
Google Fonts（グーグルフォンツ）は、Googleが無料で提供しているウェブフォントサービスです。おしゃれなフォントを簡単に使えます。
https://fonts.google.comにアクセスする- 使いたいフォントを選んで「Get font」をクリック
- 表示された
<link>タグをHTMLの<head>に貼り付ける - CSSで
font-familyに指定する
<!-- headに追加 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">body {
font-family: 'Noto Sans JP', sans-serif;
}🔗 あわせてCSSカスタムプロパティもチェックしてみましょう。
フォント関連のよく使うプロパティ
p {
font-size: 18px; /* 文字の大きさ */
font-weight: bold; /* 太さ：normal / bold / 100〜900 */
font-style: italic; /* 斜体 */
line-height: 1.8; /* 行間（1.6〜1.8が読みやすい） */
letter-spacing: 0.05em; /* 文字間隔 */
}📖 詳しくはCSSセレクターの使い方で解説しています。
フォントの種類と選び方
ウェブページで使えるフォントにはいくつかの種類があります。
セリフ体（serif）
文字の端に小さな飾り（セリフ）がついたフォントです。新聞や書籍で使われることが多く、格式のある印象を与えます。日本語では明朝体がこれにあたります。
サンセリフ体（sans-serif）
飾りのないシンプルなフォントです。画面で読みやすいので、ウェブサイトではこちらが主流です。日本語ではゴシック体がこれにあたります。
等幅フォント（monospace）
すべての文字が同じ幅のフォントです。コードを表示するときに使います。文字の位置が揃うので、プログラミングのコードが読みやすくなります。
font-familyの書き方のコツ
font-familyプロパティでフォントを指定するとき、複数のフォントをカンマで区切って書きます。最初に書いたフォントが使えなければ、次のフォントが使われます。最後に「sans-serif」のような総称ファミリーを書いておくと、どの環境でも必ず何かのフォントが適用されます。
日本語サイトでよく使われる指定は次の通りです。
- 游ゴシック（Windows/Mac両対応）
- ヒラギノ角ゴ（Mac標準）
- メイリオ（Windows標準）
- sans-serif（最終手段）
Google Fontsを使う
Google Fontsは無料で使えるウェブフォントサービスです。数百種類のフォントから好きなものを選んで、自分のサイトで使えます。
使い方は簡単です。Google Fontsのサイトで好きなフォントを選び、表示されるlinkタグをHTMLのheadに貼り付けます。あとはCSSのfont-familyでそのフォント名を指定するだけです。
日本語フォントも用意されています。「Noto Sans JP」は読みやすく、多くのサイトで使われている人気のフォントです。
ただし、ウェブフォントを使うとページの読み込みが少し遅くなります。使うフォントは1〜2種類に抑えましょう。
CSSの基本的な書き方がまだ不安な人は「CSSとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。
フォント関連のプロパティ一覧
フォントに関するCSSプロパティをまとめて紹介します。
- font-size：文字の大きさ（16px、1.2remなど）
- font-weight：文字の太さ（normal、bold、700など）
- font-style：斜体にする（italic）
- line-height：行の高さ（1.5〜1.8が読みやすい）
- letter-spacing：文字と文字の間隔
- font-family：フォントの種類
line-heightは読みやすさに大きく影響します。1.0だと行が詰まって読みにくく、2.0だと間が空きすぎます。本文には1.6〜1.8がおすすめです。
letter-spacingは日本語の場合、0.05em程度にすると少しゆとりが出て読みやすくなります。
テキストの装飾についてもっと詳しく知りたい人は「CSSのtext-decoration入門」も読んでみてください。下線や取り消し線の使い方を学べます。
フォント設定でよくあるミス
ミス1：フォント名のスペルミス
フォント名を間違えると、そのフォントは適用されません。特に日本語フォント名は正確に書きましょう。
ミス2：総称ファミリーを書き忘れる
font-familyの最後にsans-serifやserifを書き忘れると、指定したフォントがすべて使えない環境でブラウザのデフォルトフォントになります。必ず最後に総称ファミリーを書きましょう。
ミス3：フォントサイズが小さすぎる
本文のフォントサイズは16px以上にしましょう。14px以下だとスマホで読みにくくなります。
まとめ
- ✅ font-family でフォントの種類を指定する
- ✅
sans-serif（ゴシック体）がウェブで最もよく使われる - ✅ 複数フォントをカンマで区切ってフォールバックを設定する
- ✅ Google Fonts で無料のウェブフォントを使える
- ✅
font-size・font-weight・line-heightも合わせて覚えよう
フォントを使いこなすと、ページの印象が大きく変わります。レッスンでさらに詳しく学んでみましょう。