お問い合わせ
お問い合わせ
ホーム > CSS > HTMLで日本語フォントを指定する方法｜初心者でもわかるCSS設定の基本

HTMLで日本語フォントを指定する方法｜初心者でもわかるCSS設定の基本

CSS
HTMLとCSSで日本語フォントを指定する方法を解説するイメージ（フォント設定のサンプルコードと日本語テキスト）
HTMLとCSSで日本語フォントを指定する方法｜font-familyでデザインを整えよう

Webサイトのデザインにおいて、「フォントの印象」はとても重要です。特に日本語サイトでは、文字の読みやすさや雰囲気を左右するフォント選びが欠かせません。
この記事では、HTMLとCSSで日本語フォントを指定する方法を、初心者でも基礎から理解できるように解説します。

1. 日本語フォントを指定する基本構文

HTMLだけではフォントを直接指定できません。
フォントの設定はCSSの「font-family」プロパティで行います。

基本の書き方

p {
  font-family: "メイリオ", "Hiragino Kaku Gothic ProN", "MS PGothic", sans-serif;
}

上記のように、複数のフォント名をカンマ区切りで指定します。
ブラウザは左から順にフォントを探し、見つかったものを使用します。

💡フォント名に日本語やスペースが含まれる場合は、必ずダブルクォーテーションで囲みましょう。

2. CSSでフォントを指定する方法

フォントは、HTMLの要素ごとや全体に指定することができます。

ページ全体のフォントを指定する

body {
  font-family: "Noto Sans JP", "メイリオ", sans-serif;
}

これで、ページ全体のテキストが指定したフォントで表示されます。

特定の部分だけ変更する

h1, h2 {
  font-family: "游ゴシック", "Yu Gothic", sans-serif;
}

見出しだけ違うフォントにすることで、デザインにメリハリをつけられます。

👉 フォント指定の前に、CSSで文字装飾を行う方法も合わせて確認しておくと、見た目の統一感を出しやすくなります。

3. 日本語フォントを安全に指定するには？

日本語フォントは、OSによって使えるフォントが異なります。

OS主な日本語フォント
Windowsメイリオ（Meiryo）、MS ゴシック
macOSヒラギノ角ゴ（Hiragino Kaku Gothic ProN）
AndroidNoto Sans CJK JP
iOSヒラギノ角ゴシック

したがって、複数のフォントをフォールバックとして指定することが大切です。

body {
  font-family: "游ゴシック体", "Yu Gothic", "メイリオ", Meiryo, sans-serif;
}

このように書くと、端末に応じて最適なフォントが自動で選ばれます。

4. Google Fontsで日本語フォントを使う方法

Webフォントを使えば、ユーザーの端末にフォントがなくても表示できます。
特に「Google Fonts」は無料で利用できる人気のサービスです。

例：Noto Sans JPを使う場合

① Google Fontsでフォントを選ぶ
Noto Sans JP（Google Fonts）
② <link>タグをHTMLの<head>に追加
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
③ CSSで指定
body {
  font-family: "Noto Sans JP", sans-serif;
}

これでどの端末でも同じフォントが表示されるようになります。

💡 Webフォントの設定は、CSSで外部リソースを読み込む方法の記事でも詳しく解説しています。

5. フォント指定の注意点

日本語フォントを指定する際には、以下のポイントも押さえておきましょう。

  • Webフォントは読み込み速度に影響する
    → 重要な部分だけに使用すると◎
  • フォント指定順序は重要
    → 左から優先的に適用されます
  • フォントサイズ・行間も調整する
    → CSSのfontプロパティでバランスを整えましょう

6. 関連記事リンク

HTML・CSSの基本をさらに学びたい方は、以下の記事もおすすめです👇

まとめ

HTMLで日本語フォントを指定するには、CSSのfont-familyプロパティを使うのが基本です。
また、複数のフォントを指定しておくことで、どの端末でも自然な見た目を保てます。

さらにデザインを統一したい場合は、Google Fontsの日本語対応フォントを活用するのもおすすめです。
まずは本文や見出しからフォント指定を試してみましょう。

次に読むなら👉
➡ CSSのfontプロパティを完全理解！文字サイズ・太さ・行間まとめ