Google Web Fontsを使ってみる

サイトをプチリニューアル。

お気づきかもしれませんが、ちょっとだけサイトのデザインを変更しました。変更と言っても、ちょっと目に優しくないかんじだった背景色を、やわらかい感じのグリーンに変更し、サイトのタイトルなどを手書き風書体に変更した程度です。

lithium_ver02_02

Web Fontsを使ってみる

サイトのh1タイトルは画像ではなく、「Googel Web Fonts」というWeb Fontsを使用してみました。Web Fontsっていうのは、自分のパソコンに書体を設置せずにWeb経由でフォントのファイルを読み込んで表示させる技術です。

lithium_ver02_01

Google Web Fontsは、なんと!629書体も無料で利用出来ます。しかも「Word」「Sentense」「Paragraph」「Poster」と単語や文章でのプレビューでの表示に切り替えることも出来ます。

lithium_ver02_03

使用方法

1. 書体のスタイルを選択・・・とくに指定がなければそのまま。

2. 書体のキャラクターセットを選択・・・とくに指定がなければそのまま。

3. 書体のコードを選択・・・私は@importにて読み込むことにしました。

@import url(http://fonts.googleapis.com/css?family=Roboto+Slab);

4. 書体をCSSファイルに記述する

font-family: 'Roboto Slab', serif;

たったこれだけの指定をするだけです。Web Fontsは外部のファイルだと読み込み時間がかかったりするのかな?と思って敬遠していたのですが特に問題もなさそうです。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です