ネットサービスとかGoogleとか豆知識とか。

Index > API > Google Font APIでフォントのファイルサイズを大幅に削減する方法
API
2011年05月11日 13:14

Google Font APIでフォントのファイルサイズを大幅に削減する方法

  • このエントリーをはてなブックマークに追加
  • ... PV
スポンサード リンク

Googleは「Google Web Fonts」というWebフォントをホスティングしていて、これらのフォントはGoogle Font APIを介して利用することができます。

Google Web Fontsのフォントデータのファイルサイズは1フォントあたり大体30KB程度あります。それほど大きなサイズではありませんが、複数のフォントを利用する場合や、ナローバンド環境などでは気になるサイズかもしれません。

そこでGoogle Font APIでは、あらかじめフォントを適用するキャラクタ(文字)を指定してフォントデータを取得できるオプションを用意しているそうです。これにより、ダウンロードされるフォントデータのファイルサイズを大幅に削減できます。

» Streamline your web font requests: introducing “text=” - The official Google Code blog
» Streamline your web font requests. Introducing “text=” - Google Web Fonts

方法は簡単で、Webフォントを指定するURLに「text=フォントを適用したい文字」というオプションをつけるだけです。

試しに次のようなHTMLで試してみました。下記の例では「&text=fkoji」と指定しているので、「Tangerine」フォントは「f」「k」「o」「j」「i」の5文字に対してのみ適用されます。

<html>
<head>
<link
  href="http://fonts.googleapis.com/css?family=Tangerine&text=fkoji"
  rel="stylesheet" type="text/css">
<style>
  body {
    font-family: 'Tangerine', serif;
    font-size: 36px;
  }
</style>
</head>
<body>
abcdefg hijklmn opqrstu vwxyz
ABCDEFG HIJKLMN OPQRSTU VWXYZ
fkoji
</body>
</html>

これをブラウザで表示すると次のようになります。

google-font-text-1.gif

↑ このようにfkoji以外の文字にはTangerineフォントが適用されていません。

実際にどのくらいファイルサイズが削減されているか確認してみました。

google-font-text-2.jpg

↑ 「text=」を指定しない場合。25.22KBあります。

google-font-text-3.jpg

↑ 「text=」を指定した場合。たった1.67KBになりました。

この例だとファイルサイズは25.22KBから1.67KBに、約93%小さくなりました。

常にこれほどのサイズを削減できるとは限りませんが、ロゴや見出しなど限られた箇所でのみ特殊なフォントを利用しているのであれば、効果的な方法なのではないでしょうか。

» Getting Started - Google Font API - Google Code