Webフォントを使ってみる

HTML・CSS

■Webフォントとは Webフォントは、CSS3から新たに追加された仕様で、サーバーにアップロードしたフォントデータをCSSで呼び出して利用するので、ユーザーの閲覧環境に依存せず、誰が見ても同じフォントで表示されるようになります。見出しなど、特殊なフォントが使われていて画像化せざるを得なかった文字情報も、テキストのまま公開できるので、コピー&ペーストも自由にでき、SEO対策としても有利になります。また、CSSによるカラーやサイズの指定が自由にできます。

■ブラウザ対応 IE、Firefox、Safari、Chrome、Opera、iOS、Andoroidなど、ほとんどのブラウザは対応していますが、データ形式がブラウザやバージョンによって異なります。

**ブラウザごとのWebフォント対応状況**
	TrueType （.ttf）	OpenType （.otf）	EOT （.eot）	WOFF （.woff）	SVG Font （.svg）
IE4～	×	×	○	×	×
IE9～	×	×	○	○	×
Firefox 3.5～	○	○	×	×	×
Firefox 3.6～	○	○	×	○	×
Safari 3.1～	○	○	×	×	○
Chrome 4～	○	○	×	×	○
Chrome 6～	○	○	×	○	○
Opera 10～	○	○	×	×	○
Opera 11.10～	○	○	×	○	○
iOS 4.0～	×	×	×	×	○
iOS 4.2～	○	○	×	×	○
Android 2.2～	○	○	×	×	×

フォントデータはTrue TypeやOpen Type形式が一般的ですが、IEでは読み込めません。 IE8以下ではEmbedded Open Type(以下、EOT)という独自規格しか対応していませんので、EOT形式のファイルを別途用意し、同じフォントでも複数の形式を設定する必要があります。
IE8以下にも対応するには、@font-faceを以下のように定義します。

@font-face {
    font-family: 'sample';/* 任意のフォント名 */
    src: url('../font/sample.eot?') format('eot'),/* for IE6-8* /
    url('../font/sample.woff') format('woff'),
    url('../font/sample.ttf') format('truetype'),
}

font-familyにフォント名を指定し、formatにフォント形式を指定します。 srcプロパティで複数の形式(urlとformatの組み合わせ)をカンマで区切って指定できます。優先度は記述順になっています。
IE 8以下は複数の形式指定も、formatの記述も対応していませんが、最初に指定して、ファイル名の後に”?”を付けることで、”?”以降を読み込まないようにしています。
また、フォントデータを変換するWebアプリケーションを使用する方法もあります。

上記のサイトはTrueType形式のフォントをEOT形式にコンバートしてくれるWebアプリケーションです。
「ttf2eot」 （http://ttf2eot.sebastiankippe.com/

■フォントの著作権に注意 フォントデータは著作物ですので、Webフォントとして用いるには著作者の許諾が必要となりますので、著作権処理には充分な配慮が必要です。フォントデータのプロパティを確認すれば著作権者がわかります。

■Google Web Fontsを使って導入してみる Google Web Fonts （http://www.google.com/webfonts/）はGoogleでホスティングされているリソースサイトです。アカウントも不要で、すべてのフォントがオープンソースとして提供されています。また、自分でフォントデータをアップロードしたり、@font-faceなどを記述する必要もありませんので、他のフォント提供サービスと比較してとても簡単に利用できます。いまのところアルファベットのフォントばかりですが、現在400以上のWebフォントを無料で使うことができます。

基本的な使い方

まず最初の画面で「Start choosing fonts」をクリックします。

利用したいフォントを以下の画面から選び、「Quick-Use」をクリックします。

導入手順通りに「3.Add this code to your website」にかかれたコードをそのままHTMLのhead要素に記述し、フォントを読み込ませます。

<link href='http://fonts.googleapis.com/css?family=Prosto+One' rel='stylesheet' type='text/css'>

次に「4.Integrate the font into your CSS」のfont-familyの内容を適用したいセレクタに設定します。

h1{
    font-family: 'Prosto One', cursive; /* 4.の内容をそのまま設定 */
}

以上で、とても簡単に導入できます。

■日本語のWebフォント 2011年7月に日本語フォントを揃えたWebフォントサイト「フォントプラス」 （http://webfont.fontplus.jp/）がオープンし、現在「フォントワークス」「モトヤ」「白舟書体」「イワタ」の日本語フォントが400以上使用できるようです。日本語フォントは、データサイズが大きく、表示速度が遅いなどのデメリットがありました。しかし、「フォントプラス」のシステムでは、サイト内の文章を自動で解析し、使われている文字だけを抽出したフォントデータを自動で作成できるので、ダウンロードの時間を短縮できるようです。

■参考サイト

第4回 CSS3のWebフォントを使ってみよう | Think IT（http://thinkit.co.jp/story/2011/08/18/2233）
Webフォントについてのまとめ（前編）- Tips*Blog（http://www.coprosystem.co.jp/tipsblog/2012/01/31.html）