WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> その他 -> Google Web Fontで画像を使わずに文字を装飾する

Google Web Fontで画像を使わずに文字を装飾する

2011-05-22

その他

Google Web Fontで画像を使わずに文字を装飾する

見出しやタイトルなど、コンテンツのテキスト部分より目立つようにしたい場合、通常であれば専用の画像を作成してCSSで置換している場合が多いのですが、Google Web Fontを使えば、簡単に豊かなフォント表現が可能になります。

使い方は非常に簡単。
サイトにアクセスしてフォントを選択し、使用したいフォントの書体をCSSで呼び出すだけ。

残念なことに日本語には対応していませんがアルファベットや数字だけでも使ってみる価値はありです。

無料ホームページ素材

SOURCE
■HTML
「head」内に記述
<link href='http://fonts.googleapis.com/css?family=Ruslan+Display' rel='stylesheet' type='text/css'>
※フォント「Ruslan Display」を使用した場合。

■CSS
h1 { font-family: 'Ruslan Display', arial, serif; }

参考までに複数のフォントを使用したい場合、上述のHTMLを複数回書くのは面倒ですからCSSの「@import」を利用して一括で読み込むと効率的です。

@import url(http://fonts.googleapis.co/css?family=Ruslan+Display);
参考サイト
Google Web Font
http://www.google.com/webfonts

WEB制作の定番書