意外と知られていない 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>
エフェクトとクラス名は こちらの一覧表 を参照してください。ブラウザによっては対応してないエフェクトもあります。
以上になります。