【完全保存版】CSSでフォントを変更する方法まとめ｜font-familyの基本からWebフォントまで初心者向けに解説

Webサイトを作っていると、
「デザインを変えたい」「雰囲気を良くしたい」
と思った瞬間に出てくるのが フォント変更 です。

フォントを変えたいけど方法が分からない
日本語フォントの指定が難しい
PCとスマホで見た目が違う

この記事では、「css フォント変更」で検索した初心者の方に向けて、
CSSでフォントを変更する基本から、
実務でよく使われる指定方法・注意点までを 分かりやすく解説 します。

CSSでフォントを変更するとは

CSSでフォントを変更するとは、
文字の種類（書体）を指定して、表示の印象を変えることです。

フォントを変えることで、次のような効果があります。

読みやすさが向上する
サイトの雰囲気が変わる
信頼感・高級感を演出できる

フォント変更は、Webデザインの基本中の基本です。

フォントを変更する基本（font-family）

CSSでフォントを変更するには、
font-family プロパティを使います。

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

これだけで、ページ全体のフォントが変更されます。

font-familyの基本ルール

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

重要ポイント

左から順に適用される
空白を含むフォント名はダブルクォーテーションで囲む
最後は汎用フォントで締める

日本語フォントを変更する方法

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

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

なぜ複数指定するのか

OSごとに使えるフォントが違う
表示崩れを防げる
ユーザー環境差を吸収できる

ゴシック体と明朝体の使い分け

ゴシック体（おすすめ）

読みやすい
Webサイト向き
本文・UIに最適

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

明朝体

落ち着いた印象
長文には不向きな場合あり

body {
  font-family: "Yu Mincho", serif;
}

初心者の方は、
まずゴシック体を使うのがおすすめです。

フォントを部分的に変更する方法

特定の要素だけフォントを変えることもできます。

h1 {
  font-family: Georgia, serif;
}

よくある使い方

見出しだけ雰囲気を変える
ロゴ・キャッチコピーにアクセントをつける

Webフォントを使ってフォントを変更する方法

よりデザイン性を高めたい場合は、
Webフォント を使います。

代表的なのが Google Fonts です。

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

Webフォントのメリット

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

注意点

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

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

フォント名の記述ミス

font-family: Yu Gothic;

正しくは：

font-family: "Yu Gothic";

CSSが読み込まれていない

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

パスや記述ミスを確認しましょう。

他のCSSで上書きされている

body {
  font-family: Arial;
}

.article {
  font-family: serif;
}

後に書かれたCSSが優先されます。

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

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

この設定だけで、
読みやすく無難なWebサイトになります。

スマホ表示での注意点

スマホでは、
フォントが太く・大きく見えることがあります。

@media screen and (max-width: 768px) {
  body {
    font-size: 15px;
  }
}

フォントサイズとセットで調整すると効果的です。

よくある質問

フォントを変えるとSEOに影響しますか

直接的な影響はありません。
ただし、読みやすさはユーザー評価に影響します。

フォントは何種類まで使っていいですか

基本は 2〜3種類まで に抑えるのがおすすめです。

まとめ

CSSでフォントを変更するには、
font-family の理解が欠かせません。

フォント変更は font-family
日本語は複数指定が基本
ゴシック体が無難
Webフォントは使いすぎない

「css フォント変更」で検索した方は、
まず bodyにfont-familyを指定する ことから始めてみてください。
フォントを整えるだけで、Webサイトの印象は大きく変わります。

【完全保存版】CSSでフォントを変更する方法まとめ｜font-familyの基本からWebフォントまで初心者向けに解説