Google Fonts

Google Fonts

公式サイト：

Google Fonts [Official]

使い方

参考：

Google Fonts の使い方とおすすめ日本語フォント | webclips

Google Fonts の使い方や利用方法 | Web Design Leaves

日本語フォント

ゴシック体

• Noto Sans Japanese
• M PLUS 1p

明朝体

• Noto Serif Japanese
• Shippori Mincho

丸ゴシック体

• M PLUS Rounded 1c
• Kosugi Maru
• Kiwi Maru

ドットフォント

• DotGothic16

等幅

• Kosugi
• Kosugi Maru

検索：

Japanese | Google Fonts [Official]

リンク：

Google Fonts + 日本語

参考：

Google Fonts に追加された日本語フォントを使ってみる | Tips Note by TAM

Google Fonts にある丸ゴシック系の書体についてまとめてみた！ | 株式会社アルタのごった煮ブログ

欧文フォント

サンセリフ体／ゴシック体

• Open Sans
• Roboto
• Lato
• Montserrat
• Dosis
• Quicksand
• Michroma
• Source Sans Pro
• Andika

丸ゴシック体

• Varela Round

セリフ体／明朝体

• Hahmlet
• Lora
• Playfair Display
• Abril Fatface
• EB Garamond
• Bellefair

手書き／筆記体

• Parisienne
• Caveat
• Caveat Brush
• Amatic SC
• Yellowtail
• Mr Dafoe

デザイン向け／装飾体

• Abril Fatface
• Monoton
• Passion One
• Black Ops One
• Ribeye Marrow

等幅 (Monospace)

• Inconsolata
• Source Code Pro

参考：

Google フォントの使い方とおすすめフォント 17選／本文・タイトル向けなど | CREATIVE RUSH

企業サイトでも使いやすいおすすめ Google Fonts | g-log

@font-face

参考：

CSS の @font-face で Google Fonts の Web フォントを利用する方法 | Free Style

API

ドキュメント：

CSS API Update | Google Developers [Official]

font-display

@font-face に font-display: swap; を加えるには、クエリパラメータとして display=swap を追加する。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">Code language: HTML, XML (xml)

参考：

Google Fonts で font-display:swap が使えるように！ | Yuuniworks Blog

Google Fonts に font-display: swap を設定する方法 | hiraku blog

Google Fonts が font-display に対応する | uknmr

Google Fonts に font-display を適用する方法 | 株式会社LIG

display=swap とはなにか | MOL

アーリーアクセス

参考：

Early Access | Google Fonts [Official]

パフォーマンス

link タグで preconnect を追加する。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>Code language: HTML, XML (xml)

参考：

Google Fonts のパフォーマンスを最適化する 6つの方法 | えるぺぐ

Google Fonts のパフォーマンスを最適化する | きららとジュレのブログ

読み込みのパフォーマンスを向上させる方法 | 零弐壱蜂

Google Fonts の表示最適化 – Qiita

Faster Google Fonts with Preconnect | CDN Planet

サブセット (unicode-range)

参考：

Google Fonts の unicode-range を使ったサブセット方法 – Qiita

Google Fonts の日本語フォントの高速化施策が面白かった | イクログ

デモ：

Google Fonts の unicode-range を使ったサブセットがわかりよいデモ

AMP ページで使う

参考：

AMP ページで Google Fonts を使う 2 つの方法 | FirstLayout

まとめ

参考：

数字で見る Google フォントベスト15／使い方のヒント付き | Kinsta

Kosugi

入手：

Kosugi | Google Fonts [Official]

Kosugi Maru

入手：

Kosugi Maru | Google Fonts [Official]

参考：

Rounded M+ 1c がにじむので Kosugi Maru にフォント変更 | はっぴ～ぐぅ

マテリアルアイコン

公式サイト：

Icons | Google Fonts [Official]

リポジトリ：

google/material-design-icons: Material Design Icons by Google – GitHub

ドキュメント：

Material Icons Guide | Google Developers [Official]