Google Fonts Subsets

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

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

特定のweightのみ読み込む

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

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

特定の文字のみ読み込む

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

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

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

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

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

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