F.Ko-Jiの「一秒後は未来」

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

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

著者について

fkoji

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity電車遅延なう梅酒.in#グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など