ブラウザで使えるGoogleフォント登場

The Google Font API and the Google Font Directory

Googleは19日(米国時間)、Webフォントを利用するためのフォント集と利用するためのAPIをGoogle Font DirectoryおよびGoogle Font APIとして公開した。CSS3で利用できるWebフォントに対応したもので、状況に応じて最適なフォントデータを提供するという特徴がある。

Google Font APIはその使用方法が簡単というところにも特徴がある。次のようにフォントをCSSファイルへのリンクとして記述しておけば、そのWebフォントを本文で利用できる。

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
  font-family: 'Tangerine', serif;
  font-size: 46px;
}
</style>
</head>
<body>
<p>MYCOM Journal Enterprise channel</p>
</body>
</html>

Google Font APIを使った簡単な例

提供されているフォントデータはGoogle Font Directoryでチェックできる。これらフォントはフォントデザイナとともに協力して開発されたもので、今のところLatin-1 (西欧)のフォントが用意されている。ほかのフォントデザイナからのフォント提供も受け付けるとしており、今後さらにさまざまなフォントを追加していくと説明されている。現在提供されているWebフォントから、そのいくつかを利用する例を次に示す。

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Molengo' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nobile' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<title>Google Font API / Google Font Directory demo</title>
<style>
body {
  font-size: 18px;
}
</style>
</head>
<body>
<p style="font-family: 'Cantarell';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Cardo';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Crimson Text';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'IM Fell DW Pica';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Inconsolata';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Josefin Sans Std Light';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Lobster';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Molengo';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Nobile';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'OFL Sorts Mill Goudy TT';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Old Standard TT';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Reenie Beanie';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Tangerine';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Vollkorn';">MYCOM Journal Enterprise channel</p>
<p style="font-family: 'Yanone Kaffeesatz';">MYCOM Journal Enterprise channel</p>
</body>
</html>


Firefox 3.6.3/FreeBSD9 閲覧例	Opera 10.54-6340/FreeBSD9 閲覧例

Google Fontを利用する方法として同時にWebFont Loaderも公開されている。デモファイルを閲覧してみるとわかるが、Webフォントのレンダリング方法はブラウザごとに異なる。たとえばFirefoxは一旦デフォルトのフォントでレンダリングし、Webフォントのダウンロード終了してからWebフォントで再度レンダリングする。ChromeやSafariではWebフォントをダウンロードするまでレンダリングをおこなわない。WebFont Loaderはこうしたブラウザごとに異なるWebフォントレンダリングの振る舞いを調整するほか、Webフォントプロバイダの切り替え、フォントサイズの調整などの機能を提供する。

Googleは多くのサービスをWebアプリケーションとして提供している。高品質のWebフォントを無償で提供していくことで、同社のサービスのクオリティを向上させる狙いがあるとみられる。ただし、日本語フォントについては言及されておらず、今後の活動で日本語フォントが登場するかどうかはわからない。