Google Fonts とは？ | HTML / CSS入門

Google Fonts は、Google が提供している無料のウェブフォントサービスです。ブラウザ上で簡単に好きなフォントを使うことができます。

メリット：

無料で使える
ブラウザ間で統一したフォントを表示できる
サイトの雰囲気を簡単に変えられる

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

フォントを使う手順

Google Fonts にアクセス https://fonts.google.com
好きなフォントを選ぶ例：Roboto、Noto Sans JP、Merriweather など
「Select this style」をクリックして、フォントを選択
右側に表示される <link> タグをコピー

HTML に埋め込む

選んだフォントの <link> を <head> に追加します。

<head>
  <meta charset="UTF-8">
  <title>Google Fonts サンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap">
  <link rel="stylesheet" href="style.css">
</head>

CSS でフォントを指定

CSS でフォントを使うには、font-family を指定します。

body {
  font-family: 'Roboto', sans-serif;
}

ポイント：

複数のフォントをカンマで並べると、指定したフォントが使えない場合に次のフォントにフォールバックされます
sans-serif や serif は最終手段として指定しておくと安心です

実際に変えてみよう

<body>
  <h1>見出しです</h1>
  <p>本文です。フォントが変わっていますか？</p>
</body>

保存してブラウザで確認してみましょう。フォントが変わるだけで、印象がかなり変わります。

フォント選びのポイント

日本語サイトなら Noto Sans JP や Roboto など読みやすいもの
見出しと本文でフォントを分けるとデザインにメリハリが出る
フォントを多用しすぎるとページの読み込みが重くなる

次のページでは、

フォントサイズ・行間・文字間の調整
見出しや本文のスタイルを整えてデザインの統一感を出す方法

などを学びます。

少しずつ「デザインらしさ」が増えていきます。