2012年5月4日金曜日

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


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内にペーストします。

フォントAPI

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

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>

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

関連記事

0 件のコメント:

コメントを投稿

Related Posts Plugin for WordPress, Blogger...