Google Fonts

参考:

Google Fonts [Official]

使い方

参考:

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

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

日本語フォント

ゴシック体
明朝体
丸ゴシック体
ドットフォント
等幅

参考:

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

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

Google Fonts + 日本語 (googlefonts.github.io)

Japanese | Google Fonts [Official]

欧文フォント

サンセリフ体/ゴシック体
丸ゴシック体
セリフ体/明朝体
手書き/筆記体
デザイン向け/装飾体
等幅 (Monospace)

参考:

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-facefont-display: swap; を加えるにはクエリパラメータとして display=swap を追加する。

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

参考:

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>
こちらのページを参照

参考:

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 を使ったサブセットがわかりよいデモ (ksk1015.github.io)

AMP ページで使う

参考:

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

まとめ

参考:

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

Kosugi

参考:

Kosugi | Google Fonts [Official]

Kosugi Maru

参考:

Kosugi Maru | Google Fonts [Official]

Google Fonts + 日本語「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]

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。