Google Web Fontsを使ってサイトを構築

Tweet

Hello World!

Google Web Fontsはオープンソースのフォントで、GoogleのAPIを使えば、フォントファイルをダウンロードする事無く、簡単に自分のWebページに導入できます。
Webページでの使用のほか、印刷、ダウンロードしてコンピュータに組み込むのも自由で、商用でも無料で使用できます。

詳しくはこちらをご覧ください。
About Google Web Fonts

上記のHello World!はグラフィックではなく、Google Web Fontsを使って表示しているテキストです。Bloggerの記事の中に強引に入れてみましたが、やりすぎるとフォントのロードで重くなるので、通常はこういった使用法はしない方がいいと思います。

使用するフォントの選択法

使いたいフォントをリストで見つけたらAdd to Collectionボタンを押してコレクションに追加します。選択されたフォントは一番下に表示されます。
ひとつのWebページで使うフォントを選んだら、右下のUSEボタンを押します。

そうすると、Google APIのコードが表示されます。
そのコードをコピーして、自分のhtmlファイルのhead内にペーストします。

画面右上にフォントをロードする時の負荷がメーター表示されるので、針がグリーン内に納まるようにフォントを選択しましょう。ひとつのページにあまり多くのフォントを使用するのは、負荷的にも、デザイン的にも考えものです。

Webページへの導入法

html内の記述法は、こちらが詳しいです。
Getting Started - Google Web Fonts — Google Developers

上記Hello World!の場合は、以下のコードをhead内に記述します。

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

そして使用するところでfont-familyを指定してやります。以下は、CSSを使わずに指定した例です。

<div style="font-family: 'Monoton', cursive; font-size:48px; text-shadow: 4px 4px 4px #aaa;">
Hello World!
</div>

なお、使用するだけでなく、自分でフォントを登録することも可能なようです。
世界中の人に使ってもらいたい人は、ぜひ挑戦してみてください。

関連記事

• レビュー機能が凄く便利なGoogle Web Fonts