意外と知られていない Google Fonts の便利な小技 – Tricks of Google Fonts

この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

こんにちは Honma です。今回は人気の Google Fonts で使える意外と知られていない便利な小技の紹介です。

1行で複数のフォントをインポートする書き方

書き方はとても簡単で | (Vertical bar) でフォント名を区切るだけです。例えば Tangerine と Inconsolata を利用したい場合以下のような 書き方になります。

<link href=’https://fonts.googleapis.com/css?family=Tangerine|Inconsolata’ rel=’stylesheet’ type=’text/css’>

また、CSS3 の @import で使う場合も同様です。

@import url(https://fonts.googleapis.com/css?family=Tangerine|Inconsolata);

詳しくは こちら を参照してください。

フォントを最適化してインポートする (Beta)

使う文字だけ先にリクエストすることで最大 90% ファイルサイズを削減できるそうです。&text= を使用します。

<link href=’http://fonts.googleapis.com/css?family=Inconsolata&text=Hello%20World’ rel=’stylesheet’ type=’text/css’>

フォントにエフェクトを加える (Beta)

こちらはあらかじめ用意されたエフェクトを簡単に呼び出す API です。&effect=エフェクト名 を読み込んだあと適用したい箇所に相当のクラスを付加します。
こちらも | を用いて複数のエフェクトを適用させることが可能です。

<link href=’http://fonts.googleapis.com/css?family=Inconsolata&effect=anaglyph’ rel=’stylesheet’ type=’text/css’>
<div class=”font-effect-anaglyph”>This is a font effect!</div>

エフェクトとクラス名は こちらの一覧表 を参照してください。ブラウザによっては対応してないエフェクトもあります。

以上になります。