Google Web Fontとは
通常、ブラウザで表示する文字に適用できるフォントは、そのパソコンにインストールされているものだけです。
ところが、Web上のサーバー側にあるフォントを利用して、オシャレなフォントが手軽にデバイスフォントとして利用できてしまうのがWebフォントです。
中でも“Google Web Fonts”では、多数のフォントのリストから好きなフォントの種類・ウエイトを選ぶと利用するために必要なコードが自動で生成され、手軽に利用できる仕組みとなっています。
“Google Web Fonts”で公開されているフォントはすべてオープンソースとなっており、商用・非商用問わず無償で利用可能。気に入ったフォントを“Collection”として一覧で比較することができたり、Bookmarkとして残しておくこともできます。また、登録したフォントをWebフォントとして利用した場合にかかるWebページの読み込み速度を表示する機能も用意されています。今回はその中でもシンプルで使いやすそうなフォントをいくつかまとめてみました。
また以前の記事でWebフォントで制作された実例やCSS3を勉強するにあたって参考になりそうなサイトを紹介しております。ご興味があるかたはこちらも合わせて是非ご覧になってみてください。
【関連記事】
CSS3のWebフォントを使用して作られたWebサイトあつめました
CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました
使用手順
1.まずはGoogle Web Fontsにアクセス
こちらから任意のフォントをセレクトします。今回はLoraの“Normal 400”を 利用してみたいと思います。
2.コードが生成されるのでHTMLとCSSにそれぞれをにコピー&ペーストします。
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'> <title>無題ドキュメント</title> <style type="text/css"> </head> <body> <p class="font">google web font</p> </body> </html>
※5行目にフォントを読み込むソースを記述しています。
【CSS】
.font{ font-family: 'Lora', serif; }
※CSSにフォントファミリーを指定してあげます。
今回はクラスをつけ任意のフォントに設定をしています。
3.使用例
以上です。たったこれだけで手軽に利用可能できますのでCSS3 が使える環境なら積極的に導入していくと色々な面でメリットがありそうです。
参考フォント
Amethysta
Andika
Arimo
Cabin
Cambo
Cantarell
Chivo
Droid-Serif
EB-Garamond
Esteban
Hammersmith-One
Istok Web
Josefin-Slab
lato
Lekton
Lora
Maven-Pro
Muli
Open-Sans
Playfair-Display
PT-Serif
Puritan
Quattrocento-Sans
Quicksand
Telex
Terminal-Dosis
Ubuntu
Volkhov
Google Web Fonts
http://www.google.com/webfonts#
【関連記事】
CSS3のWebフォントを使用して作られたWebサイトあつめました
CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました