【完全保存版】CSSフォントの指定方法まとめ｜文字の種類・サイズ・太さ・おすすめ設定を初心者向けに解説

CSSを使ったWebデザインで、
サイトの印象を大きく左右する要素が「フォント」です。

文字が読みにくい
デザインが素人っぽく見える
スマホとPCで見た目が違う

こうした問題の多くは、CSSフォントの指定方法が原因です。

この記事では、「css フォント」で検索した初心者の方に向けて、
CSSでフォントを指定・調整する基本から、
実務でも使えるおすすめ設定までを わかりやすく解説 します。

CSSフォントとは何か

CSSフォントとは、
Webページに表示される文字の種類や見た目を指定するためのCSS設定です。

CSSでは、次のようなフォント関連の指定ができます。

文字の種類（フォントファミリー）
文字サイズ
文字の太さ
文字のスタイル（斜体など）
行間や文字間隔

フォント設定を整えるだけで、
Webページの読みやすさと信頼感は大きく向上します。

フォントの種類を指定する方法（font-family）

フォントを指定するには、font-family を使います。

body {
  font-family: Arial, sans-serif;
}

font-familyの基本ルール

複数指定が可能
左から順に適用される
最後は汎用フォントで締める

日本語フォントの指定方法

日本語サイトでは、
複数の日本語フォントを指定するのが基本です。

body {
  font-family: "Hiragino Kaku Gothic ProN",
               "Yu Gothic",
               "Meiryo",
               sans-serif;
}

ポイント

OSごとの差異を吸収できる
表示崩れを防げる
実務でよく使われる書き方

文字サイズを指定する方法（font-size）

文字サイズは font-size で指定します。

p {
  font-size: 16px;
}

よく使われる単位

px：初心者向け・分かりやすい
rem：レスポンシブ向き
%：相対指定

初心者の方は、まずpx指定から覚えるのがおすすめです。

文字の太さを指定する方法（font-weight）

p {
  font-weight: bold;
}

数値指定も可能です。

p {
  font-weight: 700;
}

主な指定値

normal（400）
bold（700）

見出しと本文のメリハリをつけるのに重要です。

文字スタイルを指定する方法（font-style）

p {
  font-style: italic;
}

italic：斜体
normal：通常

強調表現に使われますが、多用は避けましょう。

行間を調整する方法（line-height）

フォント設定で非常に重要なのが行間です。

p {
  line-height: 1.6;
}

fontプロパティでまとめて指定する方法

フォント関連の指定は、1行にまとめることもできます。

p {
  font: normal 16px/1.6 "Yu Gothic", sans-serif;
}

ただし、初心者のうちは
個別プロパティで書く方が理解しやすいです。

Webフォントを使ったフォント指定

Google FontsなどのWebフォントもCSSで使用できます。

body {
  font-family: "Noto Sans JP", sans-serif;
}

Webフォントのメリット

デザインの幅が広がる
環境差が出にくい

注意点

読み込み速度に注意
使いすぎない

CSSフォントが反映されない原因

フォント名の記述ミス

font-family: Yu Gothic;

空白を含む場合は、
必ずダブルクォーテーションで囲む必要があります。

CSSが読み込まれていない

<link rel="stylesheet" href="style.css">

CSSファイルの読み込み忘れもよくある原因です。

初心者におすすめのフォント設定例

body {
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

この設定だけで、
読みやすく無難なWebページになります。

よくある質問

フォントはどこまでこだわるべきですか

初心者のうちは、
「読みやすさ」を最優先に考えるのがおすすめです。

明朝体は使ってもいいですか

用途次第ですが、
本文にはゴシック体が一般的です。

まとめ

CSSフォントの指定は、Webデザインの基礎中の基礎です。

フォント指定は font-family
日本語は複数フォント指定が基本
行間（line-height）が重要
読みやすさを最優先する

「css フォント」で検索した方は、
まず 基本的なフォント指定とおすすめ設定 をそのまま使ってみてください。
フォントを整えるだけで、Webページの品質は一段階アップします。

【完全保存版】CSSフォントの指定方法まとめ｜文字の種類・サイズ・太さ・おすすめ設定を初心者向けに解説