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

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川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フォント設置方法

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

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

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

    下記の例は、body にフォントを設定する場合。
    body {font-family:●●●;}
    
以上で、設定終わり。
MENU Ξ