Webサイトのフォントを変えるだけで、デザインの印象は大きく変わります。Google Fonts は無料で高品質なフォントを提供しているサービスで、HTMLかCSSに数行追加するだけで使い始められます。
この記事でわかること
- Google Fontsのlinkタグでの読み込み方（推奨）
- @importでの読み込み方とlinkタグとの違い
- 複数フォントを1つのURLにまとめる方法
- フォントウェイト（太さ）の指定方法
Google Fontsとは
Google が提供する無料のWebフォントサービスです。日本語フォントの Noto Sans JP（丸みがあり読みやすい）や、英字の Montserrat（スタイリッシュな見出し向け）など、1000種類以上のフォントが使えます。
Google Fontsの公式サイト（fonts.google.com）でフォントを選び、表示されたコードをコピーするだけで利用できます。
読み込み方法
01
linkタグで読み込む（推奨）
HTMLの <head> 内に Google Fonts の <link> タグを記述する方法。ページの読み込みが速くなる最も推奨の方法。preconnect ヒントを一緒に入れることで接続を事前に確立できる。
<link rel=”preconnect”>（推奨）<link rel=”stylesheet”>font-family で適用
Preview
HTML の <head> 内に記述
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“stylesheet” href=“https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap”>
使用例：
body { font-family: ‘Noto Sans JP’, sans-serif; }
HTMLCSS
index.htmlcopy
<!-- ① 接続の事前確立（速度改善） --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <!-- ② フォントの読み込み（Google Fonts から生成したURLを貼る） --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap">
style.csscopy
/* ③ font-family でフォントを適用する */ body { font-family: 'Noto Sans JP', sans-serif; /* Google Fonts 名 → sans-serif（フォールバック） */ }
02
@importで読み込む（CSS内）
CSSファイルの 最上部 に @import url() を記述する方法。HTMLを触らずCSSだけで完結するのがメリット。ただし読み込みが linkタグより遅くなりやすいため、可能なら linkタグを推奨。
@import url(…)（CSSファイルの1行目）
Preview
CSS ファイルの先頭に記述
@import url(‘https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap’);
⚠️
@import は CSS を読み終えるまでフォント読み込みが始まらないため、linkタグより読み込みが遅くなる場合がある。HTMLが管理できない場合の代替手段として使う。
@import は CSS を読み終えるまでフォント読み込みが始まらないため、linkタグより読み込みが遅くなる場合がある。HTMLが管理できない場合の代替手段として使う。
HTMLCSS
index.htmlcopy
<!-- HTML の head には何も追加しない --> <link rel="stylesheet" href="style.css">
style.csscopy
/* ⚠️ CSSファイルの先頭（最初の1行目）に書く */ /* 他のCSSルールより前に書かないと動作しない */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap'); body { font-family: 'Noto Sans JP', sans-serif; }
フォントの使いこなし
03
複数のフォントを1つのURLで読み込む
複数のフォントは &family= でつないで 1つのリクエストにまとめることができる。リクエスト数を減らすことで読み込みを最適化できる。
&family= でフォントを追加display=swap（フォント読み込み中も文字を表示）
Preview
Montserrat（英字見出し用）+ Noto Sans JP（本文用）
High Quality Design
日本語の本文テキストはNoto Sans JPで表示されます。
1つの&でURLをつなぐ → family=Montserrat:wght@900&family=Noto+Sans+JP:wght@400;700
HTMLCSS
index.htmlcopy
<!-- 複数フォントは & family= でつなぐ --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2? family=Montserrat:wght@900 &family=Noto+Sans+JP:wght@400;700 &display=swap">
style.csscopy
/* 欧文・和文を使い分けるfont-family指定 */ body { /* 和文フォントを全体に適用 */ font-family: 'Noto Sans JP', sans-serif; } .hero-title { /* 欧文フォントを優先し、日本語部分はNoto Sans JPで補う */ font-family: 'Montserrat', 'Noto Sans JP', sans-serif; font-weight: 900; }
04
フォントのウェイト（太さ）を指定する
Google Fonts のURLでは wght@ の後に読み込むウェイト番号を指定する。使わないウェイトは指定しないことでファイルサイズを抑えられる。
wght@400;700（セミコロン区切りで複数指定）display=swap（読み込み中も文字を表示）
Preview
wght@100（Thin）
Noto Sans JP
Noto Sans JP
wght@400（Regular）
Noto Sans JP
Noto Sans JP
wght@700（Bold）
Noto Sans JP
Noto Sans JP
wght@900（Black）
Noto Sans JP
Noto Sans JP
⚠️ 使うウェイトだけを指定すると読み込みが最適化できる
HTMLCSS
index.htmlcopy
<!-- 400（Regular）と700（Bold）だけを読み込む例 --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2? family=Noto+Sans+JP:wght@400;700 &display=swap">
style.csscopy
/* font-weightを指定するとURLで読み込んだウェイトが適用される */ p { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; /* Regular */ } h1, h2, h3 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; /* Bold */ } /* ⚠️ URL に含めていないウェイトを指定しても適用されない */ /* 例：wght@400;700 のみ読み込んでいる場合は900は使えない */
まとめ
- Google Fontsは無料。公式サイトでフォントを選びコードをコピーするだけ
- 読み込みには linkタグ（推奨）と @import（CSS内）の2方法がある
preconnectヒントを付けると接続を事前に確立して読み込みが速くなる&family=で複数フォントを1つのリクエストにまとめられるwght@400;700のように使うウェイトだけ指定するとファイルサイズが小さくなる
