webdev
Google fontsでダウンロードするフォントサイズを絞る
以前Google fontsの使い方を紹介しました。
Webfontはアルファベットだとそれほどでもないのですが、それなりのサイズのファイルをダウンロードすることになります。
ですので、少しでもロード時間を短縮するためにGoogle fontsでダウンロードするサイズを減らすテクニックを紹介します。
サイズを縮小するには、必要な文字だけダウンロードするよう文字を指定します。
以前のポストで以下のようなJavascriptを仕込むことで、使用するWenfontを指定しました。
<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Share+Tech::latin' ] } }; ... </script>
上のWebFontConfigでフォントを指定していますが、familiesに加えtextいう属性を追加します。
例えば以下の様なコードになります。
WebFontConfig = { google: { families: [ 'Share+Tech::latin' ], text: "CATchaTIL!" }, };
text属性に使う文字を並べるだけです。
これで、textに指定した文字列だけを含むフォントファイルをダウンロードするようになります。
まとめ
- Google fontsは、文字列を指定することでダウンロードサイズを縮小できます
- フォントファイルサイズは比較的大きいので、結構効果があります
Leave a comment