Googleのウェブフォント：Google Font API

memo

Google Font API(TypeKitとの共同開発)というのがweb fontを簡単に使えそう。

Google Font APIで使えるフォントはまだ少ないみたいですが、使い方は簡単です。
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
で使いたいフォントを指定するだけ。
あとはCSSで
CSS selector { font-family: 'Font Name', serif; }
とかインラインで
<div style="font-family: 'Font Name', serif;">Your text</div>
という感じで指定すればいい。
_Italic_やboldなんかも
` bold
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name:bold">

italic
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name:italic">
` みたいにするだけ。
ちなみにFont+Nameの「＋」はフォントの名称にスペースのある場合(Font Nameのように)、「＋」で置き換えたもの。

複数指定する場合は「｜」で区切る感じ。
&lt;link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name:italic|Font+Name2"&gt;

さらに、WebFont LoaderというJavaScript libraryを使えば、フォントの読み込みも制御できるのでイベント発生時に書体の切り替えや、読み込みまでは代替フォントで表示させる等の対応もできそうです。
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"&gt; &lt;script type="text/javascript"&gt; WebFont.load({ google: { families: [ 'Tangerine', 'Cantarell' ] } }); &lt;/script&gt;

CSS3でweb fontを採用ということもあり、FontspringやFonts.comのようにウェブフォントを提供するサービスは海外でいくつかあるみたいですが、googleさんも始めちゃったんですね。

日本語フォントは「ひらがな」、「カタカナ」、「漢字」もあるので、どれくらい容量を抑えられるかだろうな。Flashの埋め込みフォントみたいな感覚ですかね。

Comments