無料で使えるCSS3のwebフォント・Google web fontからシンプルでカッコイイフォントまとめました

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”を 利用してみたいと思います。
top

2.コードが生成されるのでHTMLとCSSにそれぞれをにコピー&ペーストします。

font

【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.使用例

result

以上です。たったこれだけで手軽に利用可能できますのでCSS3 が使える環境なら積極的に導入していくと色々な面でメリットがありそうです。

参考フォント

Amethysta

Amethysta

Andika

Andika

Arimo

Arimo

Cabin

Cabin

Cambo

Cambo

Cantarell

Cantarell

Chivo

Chivo

Droid-Serif

Droid-Serif

EB-Garamond

EB-Garamond

Esteban

Esteban

Hammersmith-One

Hammersmith-One

Istok Web

Istok Web

Josefin-Slab

Josefin-Slab

lato

lato

Lekton

Lekton

Lora

Lora

Maven-Pro

Maven-Pro

Muli

Muli

Open-Sans

Open-Sans

Playfair-Display

Playfair-Display

PT-Serif

PT-Serif

Puritan

Puritan

Quattrocento-Sans

Quattrocento-Sans

Quicksand

Quicksand

Telex

Telex

Terminal-Dosis

Terminal-Dosis

Ubuntu

Ubuntu

Volkhov

Volkhov

Google Web Fonts
http://www.google.com/webfonts#

【関連記事】
CSS3のWebフォントを使用して作られたWebサイトあつめました
CSS3で注目のWebフォントについて今から勉強するためのサイトあつめました

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事