及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。

及川WEB室 > その他 > WEBフォントの設定方法

WEBフォントの設定方法

ウェブページのフォントは、機種やブラウザに依存する。
例えば、Windows のIEのデフォルトは「MS Pゴシック」、Mac の Safariは「ヒラギノ明朝 ProN」など。

ウェブページで、テキストにフォントを設定したい場合、CSSの「font-family」設定で、Windows と Mac の標準フォントを指定できるが、

【例】
.sample {font-family:'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;}

↑　これだと、機種によって搭載フォントが違うので表示が統一できない。

デザイン的にどうしても決まったフォントを指定したい場合は、
画像にする方法もあるが、テキストを画像にしたくない場合がある。

そんな時は、WEBフォントを使うと、機種に依存せずにフォントを指定できる。

WEBフォント設置方法

フォントファイル（拡張子「.ttf」「.eof」など）を用意する
ネットで探すと、フリーのフォントもある。
フリーで商用利用OKな和文フォント
ダウンロードした ttf ファイルを任意のフォルダに格納する。
【例】
◆◆◆/▲▲▲.ttf
ttf ファイルを IE用に eot ファイルに変換する
IEは、ttf (TrueType Font)ファイルが使用できないため、 eot (Embedded Open Type)ファイルに変換する必要がある。
私は下記のサイトで ttf → eot 変換させて頂きました。助かりました！
ttf2eot

変換した eot ファイルを、上記 1. の ttf ファイルと同じディレクトリに入れておく。
【例】
◆◆◆/▲▲▲.eot
CSS の設定
@font-face を設定する。
```
/*IE*/
@font-face {
	font-family:"●●●";
	src:url(◆◆◆/▲▲▲.eot);
}
/* Firefox, Opera, Safari */
@font-face {
	font-family:"●●●";
	src:url(◆◆◆/▲▲▲.ttf) format("truetype");
}
```
「●●●」は任意の名前でＯＫ。
「◆◆◆」はフォントファイル格納ディレクトリ。
「▲▲▲」はフォントファイル名。

「/*IE*/」の@font-faceの設定のほうを「/* Firefox, Opera, Safari */」より先に記述する。
そうでないと、Firefox でフォントが適用されない。
フォントを適用したい箇所に、font-familyで指定。
font-family の名前は上記 3. で設定した任意の名前。

下記の例は、body にフォントを設定する場合。
```
body {font-family:●●●;}
```

以上で、設定終わり。