ついに!ブラウザ上でいろんなフォントを使う時代到来?

Googleが出してきたFont APIのすごさを体感したいなら…『Font Previewer』
(from IDEA*IDEA 〜 百式管理人のライフハックブログ)


Google先生が出したFont APIがすごーい。
Google経由でいろいろなフォントが使えるようになるみたい。

Font Previewerで体験。


実際に使ってみる。
Getting Started参照。

1.スタイルシートをリンク

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=フォントの名前">

2.cssで下記のように指定

<div style="font-family: 'フォントの名前', serif;">Yamazaki Panda</div>

フォントリストから好みのフォントを選び、「Get the code」からコピペでいいかも。



FontApiTest.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Reenie Beanie">
  <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=IM Fell DW Pica SC">
    <style>
      body {
        font-size: 48px;
      }
    </style>
  </head>
  <body>
	<h1>Yamazaki Panda</h1>
	<h1 style="font-family: 'Reenie Beanie', serif;">Yamazaki Panda</h1>
	<h1 style="font-family: 'IM Fell DW Pica SC', serif;">Yamazaki Panda</h1>
  </body>
</html>

日本語フォントもいつかできると楽しいな♪