Google Fontsを読み込んでWebページで表示する

Webページは基本的に、ブラウザ側のデバイスにインストールされたフォントを利用してテキストを表示させています。

WindowsとMac等、デバイスによっては異なるフォントでテキストが表示されることになってしまいます。

Webフォントを使うと、読み込みが失敗したりしない限りは指定したフォントで表示されるので、使ってみましょう。

有料フォントもありますが、今回は無料のGoogle Fontsを使います。

ベースになるindex.htmlはこちら。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Fontsを使う</title>
</head>
<body>
  <h1>Google Fontsを使う</h1>
  <p>こんにちは、今日もいい天気ですね。ここにテキストが表示されます。</p>
</body>
</html>

ブラウザでの表示はこうです。

h1タグとpタグにそれぞれGoogle Fontsを適用していこうと思います。

まずは、Google FontsのサイトへGo。
Japaneseで絞り込んで日本語のフォントを探します。
日本語のフォントは、まだそんなに多くないんですよね。

今回は、h1をNoto Sansにして、pをNoto Serifにするとします。

Noto Sansのページに行って、Bold 700を選択(Select)します。

次は、Noto Serifのページに行って、Regular 400を選択(Select)します。

そうしたら、Google Fontsの右上の四角が3つとプラスマークがあるアイコンを押します。

するとパネルが開いて、先程選択したフォントが自動的に組み込まれた埋め込みコードが表示されます。
このコードを使って、index.htmlにWebフォントを適用します。

今回は、index.htmlのhead内に<style>タグを使ってCSSを記述します。

まずは、下記をコピーして<title>タグのすぐ下に貼り付けます。

このコードでCSSに、Noto SansとNoto Serifがインポートされます。

そして、h1にはNoto Sansを適用したいので、

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

pには、Noto Serifを適用したいので、

p {
     font-family: "Noto Serif JP", serif;
  }

を、</style>の直前に記述します。

index.html全体のコードはこちら。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Google Fontsを使う</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&family=Noto+Serif+JP&display=swap");
      h1 {
        font-family: "Noto Sans JP", sans-serif;
      }
      p {
        font-family: "Noto Serif JP", serif;
      }
    </style>
  </head>
  <body>
    <h1>Google Fontsを使う</h1>
    <p>こんにちは、今日もいい天気ですね。ここにテキストが表示されます。</p>
  </body>
</html>

ブラウザで表示を見てみましょう。