Google Fontsは単にウェブフォントを読み込むだけでなく、細かなオプションが用意されています。それらGoogle Fonts固有の便利な機能をWeb Font Loaderから利用する方法と注意点をメモしておきます。前提として、ベースとなる”Google Fontsを読み込んで利用する“も参照してください。

複数のフォントを同時に読み込む

ロードタイムを短縮するため、Google Fontsでは複数のフォントを一度にリクエストすることができます。Web Font Loaderで複数のGoogle Fontsのウェブフォントを読み込むには、設定オブジェクトのfamiliesプロパティに配列として複数のフォント名をセットします。以下の例はlatoとopen sansを利用する例です。

//設定オブジェクト
var config = {
  google: {
    families: ['Lato', 'Open Sans']
  }
};

//ウェブフォントの読み込み開始
WebFont.load(config);

なお、”Open Sans“は”Open+Sans“というように、スペースを’+’にしても良いです。

書体を指定する

太さや書体はフォント名に’:’をつけた後に指定します。太さはbまたはbold、800という風に、イタリック体はiやitalicというように指定します。

複数の書体はコンマ区切りで指定します。

//設定オブジェクト
var config = {
  google: {
    families: ['Lato:italic100,bold', 'Open Sans:bi']
  }
};

//ウェブフォントの読み込み開始
WebFont.load(config);

実際に指定したものがこちらです。

サブセット化する

ウェブフォントが複数の言語をサポートしていても、全ての言語や文字（script)をウェブページで表示することはほとんどありません。そのため、Google Fontsのデフォルトでは（もしサポートされていれば）英字とアラビア数字などのみが含まれるフォントファイルが配信されます。このようにサポートされている全ての字体ではなく一部だけの字体を含ませる事をサブセット化といい、ダウンロードするファイルサイズを減らす工夫の一種です。もし特定の言語や複数の言語のウェブフォントが必要な場合は、フォント名、書体を指定した後に、’:’をつけ、カンマ区切りで言語を指定します。次の例ではOpen Sansフォントのキリル文字サブセットを読み込んでいます。

//設定オブジェクト
var config = {
  google: {
    families: ['Open Sans:400:cyrillic']
  }
};

//ウェブフォントの読み込み開始
WebFont.load(config);

実際に指定したものはこちらです。

テキストサブセット

例えばロゴやブランド名にウェブフォントを使用する場合など、予め数文字程度分しかウェブフォントが必要にならない場合があります。そのような場合にはアルファベット全体のウェブフォントをダウンロードしても、そのほとんどが無駄になってしまいます。こういうケースに対応するため、Google Fontsでは言語の種類でのサブセット以外にも文字でのサブセットに対応しています。Web Font Loaderで文字サブセットを利用するには、textプロパティに利用したい文字列をセットします。例えば、次の例では‘abcABC’という文字だけを含むウェブフォントをダウンロードします。

//設定オブジェクト
var config = {
  google: {
    families: ['Lobster'],
    text: 'abcABC'
  }
};

//ウェブフォントの読み込み開始
WebFont.load(config);

実際に指定したものはこちらです。テキストサブセットを利用すると、フォントファイルサイズがとても小さくなります。特に字体の多い言語で有効です。

テキストサブセットは個別のフォントを指定できません

テキストサブセットはfamiliesプロパティで指定した全てのフォントをサブセット化します。つまり、ロゴやタイトルで使われるウェブフォントと本文で使われるウェブフォントがある場合、一緒には出来ません。そのような場合は次のように別々に読み込んでください。

//設定オブジェクト
var config = {
  google: {
    families: ['Lobster'],
    text: 'abcABC'
  }
};

//ウェブフォントの読み込み開始
WebFont.load(config);

//別の設定オブジェクト
var config2 = {
  google: {
    families: ['Lato']
  }
};

WebFont.load(config2);

実際に指定したものはこちらです。ただし別々に読み込むとその分リクエスト数が増えることに注意してください。