C.a.T!

以前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は、文字列を指定することでダウンロードサイズを縮小できます
• フォントファイルサイズは比較的大きいので、結構効果があります