webフォントを使ってサイトの表現力をアップ

新米Webデザイナーのナカモラです!
今回は、webフォントを使ってサイトの表現力をアップする方法について書きたいと思います!

webフォントとはCSS3から加わった、ブラウザで任意のフォントを使える機能のことです。
サーバーにフォントファイルを用意すれば、そのフォントが入っていないPC環境でも、そのフォントを表示する事ができます。

2年前に提唱された機能ですが、現在各ブラウザでWOFF(Webフォント標準フォーマット)などの対応がどんどん進んでおり、これから先重要な機能になるのではないかと思っています。


以下対応ブラウザ。

●TIF
Firefox3.5以上
Safari3.1以上
Opera10以上
Chrome

●EOT(現段階IEはこのフォーマットのみ対応)

Internet Explorer 4.0以上

Chrome
Safari

●WOFF(Webフォント標準フォーマット)

Firefox 3.6以降
Chromeは6から対応、Opera、IEも今後対応していく予定。

※iPhone/iPadはiOS 4.2からTTFが対応されました。それ以前のバージョンだとSVG Fontsが必要となります。


それでは、Webフォントの実装方法のご紹介です。
自分でサーバーへ上げる方法と、Fonts.comGoogle Font APITypekitFontspringデコもじなどのフォントサービスを使う方法があります。
自分でサーバーへ上げる方法はライセンスの問題で、一部を除いては規約違反となってしまうことが殆どなので、私はフォントサービスを使う方法をおすすめします。

フォントサービスを使う方法

特に有名書体を取り扱っているFonts.com(有料/無料)はおすすめです。
数が多い上、日本語フォントもあります。

Fonts.comサービス利用の流れ

①. サインアップをします。




Freeボタンを押し、ページが遷移したら「Account details」の必要事項に名前、任意のパスワードなどを入力してください。

②. ログイン画面です。プロジェクトを新規作成します。

③ 使いたいフォントを選び、右横のボタンを押します

④. 選んだフォントを使うCSS(ex:h1、p、#box、.box など)セレクタを入力→Add Selectorボタン→Save changes and update style sheetを押します。

⑤. 表示されたタグをコピーし、タグ直後に貼り付けて完了です。

Google Font APIサービス利用方法

このGoogle Font APIはJavascriptを使ったり、面倒な登録などせず、少しのタグを追加するだけで使えるので大変お手軽です。
使い方はディレクトリから使いたいフォントを選んでリンクするだけ。
今回は「Reenie Beanie」というフォントを選びました。
←Reenie Beanieフォント

サンプルコードは以下

■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 rel=”stylesheet” href=”./css/common.css” type=”text/css”>
<link href=’http://fonts.googleapis.com/css?family=Reenie+Beanie’ rel=’stylesheet’ type=’text/css’>
<title>webフォント</title>
</head>
<body>

<p class=”g-ft”>hogemoge</p>

</body>

</html>

■CSS

p .g-ft{

font-family: ‘Reenie Beanie’, serif;

font-size: 46px;
}

これでフォントが変わったかと思います。
自分でフォントを用意せずに利用できるなんて、本当に便利ですよね。

任意のフォントをサーバーへ上げる方法

それでは、サービスを使わず自分でサーバーへ上げて利用する方法をご紹介いたします。

手順

①フォントファイルを用意(.ttf)
②.ttfを.eotへ変換
③cssに@font-faceを設定し、.ttfと.eotの2ファイルとをサーバーへアップ

①フォントファイルを用意(.ttf)

まずはフォントファイル(.ttf)を用意します。

※フォントファイルを利用するにあたって必ずライセンスを確認してください。

今回はライセンスフリーのM+FONTSを使いました。

②.ttfを.eotへ変換

IEでは.eot形式にしか対応していないので、.ttfと.eotの2つファイルを用意します。

.eotへの変換はEOTfastというソフトで変換します。

.ttfファイルをドロップするだけで.eot形式にしてくれます。
ソフトはhttp://eotfast.com/からダウンロードしてください。(ダウンロードする際に簡単なアンケートに答える必要があります。)

③CSSに@font-faceを設定し、.ttfと.eotの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 rel=”stylesheet” href=”./css/common.css” type=”text/css”>
</head>
<body>

<p class=”w-ft”>ホゲモゲほげもげhogemoge</p>

</body>

</html>

■CSS

@font-face{

font-family: ‘Myfont’;

src: url(‘../font/mplus-1c-light.eot’) format(‘opentype’);

src: local(‘hideIE’),url(‘../font/mplus-1c-light.ttf’) format(‘truetype’);
}

p.w-ft{

“font-family: ‘Myfont’;

font-size: 30px;
}

↓サンプルファイルはこちらからダウンロードできます↓

【ダウンロード】

以上の設定を行って完了です。

是非試してみてください。

この記事は

Interest Speaker > How to / Tips > webフォントを使ってサイトの表現力をアップ

この記事と類似または関連した記事

「styleswitcher.js」で文字サイズ変更ボタンを設置する
「styleswitcher.js」で文字サイズ変更ボタンを設置する
CSS によるロールオーバー
CSS によるロールオーバー
CSS3.0 MAKER
CSS3のさまざまな効果を簡単に生成できるジェネレーターツール5種。