@font-faceルール

TOPページに戻る > CSS

@font-faceルール

CSS3からサーバー上に設置したWEBフォントを利用することができるようになりました
font-familyプロパティで、WEBフォントを指定します
実際にWEBフォントを使う場合は主要ブラウザに対応させるため何種類か用意してください

ブラウザ	対応しているWEBフォント形式	WOFF形式
IE4～IE11	EOT	IE9以上
Firefox	TTF OTF	Firefox 3.6+
Chrome	TTF OTF SVG	Chrome 6+
Safari 3.1+	TTF OTF SVG	-
Opera 10+	SVG	-

使い方（書式）css

@font-face {
    font-family: 'font1';    /* font-familyの値には好きな名前をつけられます */
    src: url('hoge.ttf');   /* webフォントのファイルの場所 */
  }

対応ブラウザ

実際の指定方法

@font-faceで使えるようになったWEBフォントを要素に適用

@font-face {
    font-family: 'font1';    /* font-familyの値には好きな名前をつけられます */
    src: url('hoge.ttf');   /* webフォントのファイルの場所 */
  }

p {
 font-family:'font1';        /* WEBフォントを要素に適用 */
  }