たった4ステップでGoogleWebFontsを使う方法について

2012年01月19日 - Yutaka Moromizato

色々フォントについて調べて整理したところで「なんだかフォントもオープンになってきたじゃないか、じゃぁどうやって使うのか」という気分になってきました。

そこで、フリーライセンスで使えるWebFontないかなーと調べてみると、「GoogleWebFonts」にまず行き当たります。

試しに使ってみました。サンプルサイトをご覧下さい。

魅力的なフォントでテキスト表示されていると思います。

以下は、GoogleWebFontsの使い方を画面キャプチャを用いて説明したものです。

webfont1

ズラーっと並ぶWebFontsの中から好きなものを選びます。

「Add to Collection」ボタンを押せば選んだことになります。

webfont2

画面右下の「Use」ボタンを押すと、Web Fontsの利用画面になります。

webfont3

使用したいフォントにチェックをいれます。

この時、複数のフォントをコレクションしており、同時に利用したい場合も、複数にチェックを入れておきます。

画面をスクロールすると下記の画面が出てきます。

webfont4

WebFontsを外部（この場合Googleさんのサーバー）から呼び出すためのコードが自動生成されていますので、これを自分のサイトへコピペします。読み込むのに成功したら、例えば、以下のような使い方をします。サンプルサイトの記述です。

<link href='http://fonts.googleapis.com/css?family=Italianno|Jura:600' rel='stylesheet' type='text/css'>

h1 { font-family: 'Italianno', cursive; }
h2 { font-family: 'Jura', sans-serif; }

<h1>This is a font sample of Italianno.</h1>
<h2>This is a font sample of Jura.</h2>

こんな風になります。
サンプルサイト

以上、Google Web Fontsの使い方でした。

Web屋さんにとってはとーーっても簡単なので、日本語WebFontsがもっと普及してくれることを祈ります。

BLOG