C.a.T!

以前Google fontsの使い方を紹介しました。
Webfontはアルファベットだとそれほどでもないのですが、それなりのサイズのファイルをダウンロードすることになります。
ですので、少しでもロード時間を短縮するためにGoogle fontsでダウンロードするサイズを減らすテクニックを紹介します。

サイズを縮小するには、必要な文字だけダウンロードするよう文字を指定します。
以前のポストで以下のようなJavascriptを仕込むことで、使用するWenfontを指定しました。

[code lang=”javascript”]
<script type="text/javascript">
WebFontConfig = {
google: { families: [ ‘Share+Tech::latin’ ] }
};
…
</script>
[/code]

上のWebFontConfigでフォントを指定していますが、familiesに加えtextいう属性を追加します。
例えば以下の様なコードになります。

[code lang=”javascript”]
WebFontConfig = {
google: {
families: [ ‘Share+Tech::latin’ ],
text: "CATchaTIL!"
},
};
[/code]

text属性に使う文字を並べるだけです。
これで、textに指定した文字列だけを含むフォントファイルをダウンロードするようになります。

まとめ

• Google fontsは、文字列を指定することでダウンロードサイズを縮小できます
• フォントファイルサイズは比較的大きいので、結構効果があります