Google Fontsを手軽にHTMLサイトに導入する

Googleが提供しているGoogle Fontsでは、日本語フォントも含めて様々なフォントが自ら作ったサイト上で利用可能です。
手軽にHTMLで作ったサイトに導入する方法を紹介します。

上記サンプルサイトはどんな端末で見ても同じフォントで表示されます。

Google Fontsは、CDN(=Content Delivery Network)を利用してクラウド上で提供されるフォントなので、ネット接続されていればHTMLで指定したフォントサイトURLに読み込みを行いフォントデータを取得して表示します。

Google Fontsは、手軽にサイトの見た目をよくしたいときに便利な方法ですが、通常のサイトに比べ読み込みが遅いという欠点はあります。

サンプルのサイト（導入前）
Google Fontsをサイトに導入する
今回のソースコード全体
複数のGoogle Fontsを使いたいとき
選択したフォントをクリアするには

サンプルのサイト（導入前）

以下のようなシンプルなサイトを作りました。
CSSでのフォント指定はしていません。

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">
    <link rel="stylesheet" href="style.css">
    <title>Googleフォントの利用</title>
</head>
<body>
    <main>
        <p>
            「ではみなさんは、そういうふうに川だと云（い）われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」<br>
            「ジョバンニさん。あなたはわかっているのでしょう。」<br>
            「大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。」<br>
            「ではカムパネルラさん。」
        </p>
        <p class="right"><small>宮沢賢治「銀河鉄道の夜」より</small></p>
    </main>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    display: grid;                  /* CSSグリッドを適用 */
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
    background-color: midnightblue;
}
 
main{
    width: 80%;
    justify-self: center;   /* 横方向中央揃え */
    align-self: center;     /* 縦方向中央揃え */
 
    font-size: 3vw;         /* 表示領域幅の3%を1文字のサイズとする */
    color: floralwhite;
    text-align: justify;    /* 文字の折り返しを自然にする */
}

small{
    font-size: 0.6em;
}

.right{
    text-align: right;
}

表示イメージ

Google Fontsをサイトに導入する

まず、Google Fontsにアクセスします。

Browse Fonts - Google Fonts

Making the web more beautiful, fast, and open through great ...

Google Fontsでは、フォント名やカテゴリ、言語、スタイル等で検索ができます。

今回は、試しに日本語のフォントを選んでみます。

候補が沢山表示されますので、好きなフォントをクリックして選択します。（わたしはRocknRoll Oneを選択してみました）

フォントを選択すると詳細が表示されます。
Select this styleの文字をクリックします。

わたしが選択したRocknRoll Oneは、1種類でしたが、フォントによっては太さの違うバージョンも選択できます。

Select this styleをクリックすると右側にSelected familyというウインドウが開き、HTMLで利用するためのコードが表示されるので、この文字列をコピーします。

利用したいHTMLを開きheadタグ内に貼り付けます。

貼り付け例

<!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">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>Googleフォントの利用</title>
</head>
<body>
    <main>
        <p>
            「ではみなさんは、そういうふうに川だと云（い）われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」<br>
            「ジョバンニさん。あなたはわかっているのでしょう。」<br>
            「大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。」<br>
            「ではカムパネルラさん。」
        </p>
        <p class="right"><small>宮沢賢治「銀河鉄道の夜」より</small></p>
    </main>
</body>
</html>

これでGoogle Fontsを利用する準備が整いました。

次はCSSにGoogle Fontsのフォント名を設定します。
先ほどのSelected familyを下にスクロールするとCSS用のコードが表示されているので、この文字列をコピーします。

CSSにコピーしたコード文字列を貼り付けてください。

以下は、bodyタグに対して（サイト全体のフォントとして）Google Fontsを設定した例です。

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    display: grid;                  /* CSSグリッドを適用 */
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
    font-family: 'RocknRoll One', sans-serif;   /* Google Fonts */
    background-color: midnightblue;
}
		:
		:

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">
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=RocknRoll+One&display=swap" rel="stylesheet">
    <!-- /Google Fonts -->
    <link rel="stylesheet" href="style.css">
    <title>Googleフォントの利用</title>
</head>
<body>
    <main>
        <p>
            「ではみなさんは、そういうふうに川だと云（い）われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」<br>
            「ジョバンニさん。あなたはわかっているのでしょう。」<br>
            「大きな望遠鏡で銀河をよっく調べると銀河は大体何でしょう。」<br>
            「ではカムパネルラさん。」
        </p>
        <p class="right"><small>宮沢賢治「銀河鉄道の夜」より</small></p>
        <p class="right"><small>RocknRoll One by Google Fonts</small></p>
    </main>
</body>
</html>

style.css

/* style.css */
@charset "utf-8";

*{
    margin: 0;
    padding: 0;
}

body{
    display: grid;                  /* CSSグリッドを適用 */
    grid-template-columns: 100vw;   /* ビューポート幅最大 */
    grid-template-rows: 100vh;      /* ビューポート高さ最大 */
    font-family: 'RocknRoll One', sans-serif;   /* Google Fonts */
    background-color: midnightblue;
}
 
main{
    width: 80%;
    justify-self: center;   /* 横方向中央揃え */
    align-self: center;     /* 縦方向中央揃え */
 
    font-size: 3vw;         /* 表示領域幅の3%を1文字のサイズとする */
    color: floralwhite;
    text-align: justify;    /* 文字の折り返しを自然にする */
}

small{
    font-size: 0.6em;
}

.right{
    text-align: right;
}