Chapter 08

7. フォントの変更

Masumi Morishige（umi-mori）
Masumi Morishige（umi-mori）
2021.01.02に更新
このチャプターの目次
  1. はじめに
  2. フォントの決め方
  3. Google Fontsの設定方法
    1. 1. フォントを選択
    2. 2. index.htmlへの変更
    3. 3. main.cssへの追記
    4. 4. ウェブページの確認

はじめに

フォントは、配色と同様にウェブサイトのイメージを作る上で大変重要です。
フォントを作成する上で意識するポイントは、主に以下の3つがあります。

  1. 利用規約（商用利用可能か、ライセンス明記が必要か）の確認
  2. 対応言語の確認
  3. 表現可能な漢字の確認（日本語の場合）

フォントの決め方

フォントは様々な個人のクリエイターが作成していたり、企業が販売していたりもします。
ここで注意するポイントとして、個人のクリエイターの作成したフォントは難読漢字などに対応していないことがあります。そのため、ウェブサイトのヘッダーの部分だけ特別なフォントに使用したい場合ではなく、ブログサイト全体に適応させる場合は推奨しません。

私は、ライセンス確認がしやすく、評判の良いGoogle Fontsを使用することが多いため、ここではGoogle Fontの反映方法を紹介していきます。

https://fonts.google.com/

Google Fontsの設定方法

1. フォントを選択

まず、Google Fontsへアクセスし、そのウェブサイトに適したフォントを全て選択しましょう。私はNoto Sans JPが一番読みやすく感じるので、こちらのフォントを選択しました。

また、全て選択し終わったら、以下のようなlinkコードをコピーしましょう。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">

select_font.png

2. index.htmlへの変更

次に、index.htmlのheadタグの中にコピーしたコードを挿入します。

index.html
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="format-detection" content="email=no,telephone=no,address=no">

    <title>Landing Page Temp</title>
    <link rel="stylesheet" href="./static/css/mvp.css" />
    <link rel="shortcut　icon" href="./static/icons/favicon.ico">
    <link rel="stylesheet" href="./static/css/main.css" />
    <!-- この2行を追加 -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
</head>

3. main.cssへの追記

最後に、main.cssに以下のようなfont-familiyを指定するコードを追記します。

main.css
* {
    font-family: 'Noto Sans JP';
}

4. ウェブページの確認

再びウェブブラウザでindex.htmlを開き、再読み込みを行い、以下のようにフォントが変わったら、成功です！

confirm_font.png