CSS3の@font-face指定

2012/01/12

@font-face指定で、Webfontを使用してみる。

1）サーバーの任意の場所にフォントデータ（.eotと.ttf、.otf）をアップする。

2）cssに指定

@font-face {
	font-family: 'フォント名';
	src: url('フォントのURL/fonts.eot');/* IE */
}

@font-face {
	font-family: 'フォント名';
	src: local('フォント名'), /* フォントがローカルにインストールされてる場合の指定 */
	url('フォントのURL/fonts.otf') format('opentype'); /* Safari、Chrome、Firefox、Opera */
}

p{
	font-family: 'フォント名';
}

「font-family」は任意の名前、自分で名前つけてもよし
「url」はフォントをアップしてるサーバーのパス。相対でも絶対でもよし
「local(‘フォント名’)」は、フォントがローカルにインストールされてる場合の指定
@font-faceをまとめて指定すると、IEでWebfontが指定されないので分けて指定する

※「.eot」はIE独自で使う拡張子
「.ttf」を「.eot」に変換してくれるサイト
http://ttf2eot.sebastiankippe.com/

※なにかのとき用
フォントのファイル形式を変換してくれるサイト
http://www.freefontconverter.com/
http://www.fontconverter.org/

【外部サーバーに置いてるwebフォントがある場合】

webフォントを外部URLで指定したことなかったですね。
上記のfont-faceの指定だけでは表示ができないようです。
（厳密にいうとSafariは表示されましたが、Firefox、Chromeはダメでした。IE未確認）

ではどうするかというとwebフォントを置いてる側のサーバーのhtaccessに記述が必要でした。

//htaccessの記述
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>
 
#MIMEタイプ
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

■「FilesMatch〜」の記述は「eot」「ttf」「otf」「woff」の拡張子に対してリクエストがあった場合、どこからでのリクエストでも許可しますというもの（”*”はどこからでも）
■「MIMEタイプ」の記述は、サーバーに対して「この拡張子はフォントです」とお知らせしてるもの

このhtaccessをwebフォントを置いてるサーバーにアップしたらwebフォントが表示されました。
※htaccessを触るので、自己責任の上で行ってください。

簡単にまとめて書きましたが、ちょっと深い内容だったので、近々別に投稿して残しておこうかと思います。