Web Fonts（Google Fonts）

Web Fonts

• CSS3.0 fonts module
• 一般的に、Webブラウザーで表示される文字は、見ているデバイスに依存します
• それによって、デバイスごとの文字の見え方・レイアウトに影響がでてきます
• そのことを解決するための仕様が、Web Fontsです
• Web Fontsを提供しているサーバーからダウンロードする形式で、書体指定が可能

※（PC内の文字が、Web Fontsでは無いことに注意する必要があります。）

Google Fonts

fonts.google.com

Google Fonts の使い方

• 日本語書体の使い方

1.「Filters」ボタンをクリックして「Language」の種類を選択します

2. 横書きでの表現に適している「Noto Sans Japanese」を選択します

3. 青いボタン「Get font」をクリックします

4. 青いボタン「Get embed code」をクリックします

5. Embed code をコピー

• 「Copy code」の部分をコピーしてHTML内のhead部にペースト
• 「Copy code」の部分をコピーしてCSS内のbodyのfont-familyにペースト

«index.html»

<!-- 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=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">

«style.css»

/* ---------------------------------------
  body
--------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  line-height: 1.0;
}

「Download all」で、同じFontをPCにインストールすることも可能

Google Fonts + 日本語

• 日本語のデザイナー ウェブフォント
• 日本語の文字表現の幅が広がります（2024年時点では、Google Fontsに多種多様な日本語書体が揃っているため、出番は少なくなっています。）

googlefonts.github.io