2012/01/14

Googleが提供するWebFonts、Google Web Fontsを使ってみました。

Google Web Fontsの特徴としては、

豊富な種類

オープンソース

ユーザ登録不要

リクエスト数や使用フォント数の制限なし

などが挙げられます。

WebFontsはモダンブラウザなら大体サポートしているので今後利用が増えていくと思われます。

使用方法は簡単で、使用したいフォントの下部にある「Quick-use」をクリックするとCSSの読み込み先と指定方法が示されるのでそれにしたがってHTMLを記述するだけです。

基本的には以下のような記述になります。

CSS指定

<link href='https://fonts.googleapis.com/css?family=<フォントファミリー>' rel='stylesheet' type='text/css'>

(*) フォントファミリー名にスペースが含まれる場合は'+'に置き換える。

スタイル指定

font-family: '<フォントファミリー>', cursive;

例としていくつか使用してみます。

Rouge Script

Positive thinking makes your life better.

Fredericka the Great

Positive thinking makes your life better.

Sofia

Positive thinking makes your life better.

Trade Winds

Positive thinking makes your life better.

Flamenco

Positive thinking makes your life better.

Flavors

Positive thinking makes your life better.

Qwigley

Positive thinking makes your life better.

Miniver

Positive thinking makes your life better.

Arizonia

Positive thinking makes your life better.

Frijole

Positive thinking makes your life better.

Caesar Dressing

Positive thinking makes your life better.

Ruge Boogie

Positive thinking makes your life better.

Playball

Positive thinking makes your life better.

Eater

Positive thinking makes your life better.

Ruthie

Positive thinking makes your life better.

Alex Brush

Positive thinking makes your life better.

Marck Script

Positive thinking makes your life better.

Monsieur La Doulaise

Positive thinking makes your life better.

Spicy Rice

Positive thinking makes your life better.

Sunshiney

Positive thinking makes your life better.

Six Caps

Positive thinking makes your life better.

記事執筆時点で提供されているフォントは400以上、ライセンスも気にせず煩雑なフォントファイルの管理も行う必要がないGoogle Web FontsはこれからのWebの表現力をさらに高めていってくれると思います。