Google Fonts Subsets

Google Fontsを簡単にサブセット化する方法

Google Fontsはlinkタグで読み込む際にパラメータを付与することで簡単にサブセット化することができます。

特定のweightのみ読み込む

特定のweightのフォントのみ読み込む場合は、フォント名の後に:(コロン)をつけ、その後にweightを指定します。
複数指定する場合はカンマで区切ります。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400" rel="stylesheet">
Markup

特定の文字のみ読み込む

例えば大文字の”ABC”のみ読み込みたい場合は、textパラメータで指定します。

<link href="https://fonts.googleapis.com/css?family=Roboto&text=ABC" rel="stylesheet">
Markup

特定のweightと文字の組み合わせ

上記2つを組み合わせると以下のようになります。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,400&text=ABC" rel="stylesheet">
Markup

使う文字、ウェイトが決まっている場合はこのようにサブセット化することで容量を削減できますので活用していきましょう。