かなり充実してきたGoogle Web Fonts API

以前からあるサービスですが、久々に見たらフォント数がかなり増えていたので紹介してみます。

ちなみに現在105個の英語フォントが提供されています。

ここでフォントを選んで、次の画面でコードを取得します。

今回の場合以下のようになります。

まず使用するフォントを読み込んで

<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>

フォントを使用する場所をCSSで指定します。

h1 { font-family: 'Terminal Dosis Light', arial, serif; }

Font previewerでリアルタイム編集

フォントのサイズや太さ、文字の間隔、単語の間隔などを編集できて、リアルタイムで表示を確認できます。

コードも表示されるのでお手軽です。

CSS3のtext-shadowを組み合わせると面白い

テキストに影をつけるtext-shadowを使うと画像で作ったロゴのようになります。

南国風なロゴに仕上がっています。

スタイリッシュなロゴに仕上がっています。

text-shadowについては以前紹介しましたのでをご参考に！

ちなみにこのブログのロゴもGoogle Web Fonts APIを使っていて、text-shadowでオンマウスで光るようにしています。

web fontやCSS3が充実してくると画像なくてもなんとかなりそうですね。