PR

CSS3のWebフォントを使ってみよう

2011年8月18日(木)
宮本 麻矢(著)山田 祥寛(監修)

Webフォントのライセンスには要注意

Webフォントに利用できるフォントは、前提として、ライセンスで@font-faceでの使用が許可されている必要があります。フォントは一般的に利用条件が厳しく、市販されているフォントはまずWebフォントでは利用できないと考えておいた方が良いでしょう。そこでお勧めのフォント提供サイトを紹介しましょう。

フォント形式のコンバータでも紹介したFont Squirrelの@font-face Kitでは、Webフォントとして利用できるフォントが集められています。WOFFやTrueType、EOT,SVG形式などのフォントデータをまとめてダウンロード可能です。

図5:Font Squirrel | Download Hundreds of Free @font-face Fonts(クリックで拡大)

Fonts.com(http://webfonts.fonts.com/)は、ユーザー登録するとフォントを利用できます。無料と有料のプランがあります。

図6:Fonts.com web fonts(クリックで拡大)

日本語フォントを使いたい場合には、「デコもじ」というサービスもあります。こちらも登録制で無料トライアルを利用できます。提供されるJavaScriptコードを埋め込んで利用します。

図7:デコもじ(クリックで拡大)

Google Web Fontを使ってみよう

また、有名なところで、Google Web Fonts(http://www.google.com/webfonts)があります。無償で利用できるWebフォントのホスティングサービスです。Google Web Fontsを利用すれば、フォントファイルを自分で用意してサーバーにアップロードする手間は必要ありません。また@font-faceなどの記述をしなくてもWebフォントを利用できます。

図8:Google Web Fonts(クリックで拡大)

使い方は簡単で、まず、フォント一覧から好みのフォントを選びます。次にGoogleWebFontで提供されるコード(link要素)をコピー&ペーストします。「family=」の後に、フォント名を記述するだけですので、この部分を好みのフォント名に置き換えれば使用できます。例では、「Love Ya Like A Sister」を選びました。この時、フォント名に含まれる半角スペースがあれば、+に置き換えます。これで外部スタイルシートとして読む込み準備が整いました。後は、font-familyプロパティでフォント名を指定すれば利用できます。

図9:Google Web Fontsで提供されるコード(クリックで拡大)

[リスト4]Google Web Fontsの利用例

<link href='http://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister&v2' rel='stylesheet' type='text/css'>
<style type="text/css">
h1 {
  font-family: 'Love Ya Like A Sister', cursive;
}
</style>
</head>
<body>
<h1>Google Web Font</h1>

図10:Google Web Fontsの利用例(sample3.html)

以上、Webフォントの使い方を紹介しました。Webフォントを利用すれば、Webのタイポグラフィの表現が広がります。まだ策定中ではあるものの、既に導入可能な技術ですので、ぜひ挑戦してみてください。なお、サンプルのフォント「ひな字小2」は、ライセンスフリーです。使いどころに困りますが、よろしければどうぞご自由にお使いください。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

【参考文献】

<サイト最終アクセス:2011.07>

Think IT会員限定特典
  • 「CSS3のWebフォントを使ってみよう」サンプルプログラム

著者
宮本 麻矢(著)山田 祥寛(監修)
WINGSプロジェクト

有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表:山田祥寛)。おもな活動は、Web開発分野の書籍/雑誌/Web記事の執筆。ほかに海外記事の翻訳、講演なども幅広く手がける。2011年3月時点での登録メンバは36名で、現在もプロジェクトメンバーを募集中。執筆に興味のある方は、どしどしご応募頂きたい。著書多数。
http://www.wings.msn.to/

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています