CSS - @font-face - とほほのWWW入門

ルール名	@font-face
構文	@font-face { ... }
サポート	C3 / e5.5 / Fx3.5 / Ch4 / Op10 / Sa3.1

Webフォントを使用可能にします。下記の記述で、font-family にフォント名として myfont を指定可能になります。format() はフォント形式(format名)を指定します。省略可能です。@font-face は、CSS2.0 で定義されましたが、CSS2.1 で一度削除され、CSS3 で再定義されました。

CSS

@font-face {
  font-family: myfont;
  src: url(http://www.yyy.zzz/myfont.woff) format("woff");
}
* {
  font-family: myfont;
}

利用可能なフォント形式には下記などがあります。

形式	説明	format名	拡張子	サポート
WOFF	Web Open Font Format	woff	.woff	IE9 / Fx3.6 / Ch6 / Sa5.1 / Op11
EOT	Embedded OpenType	embedded-opentype	.eot	IE4
OTF	OpenType Font	otf	.otf .ttf	Fx3.5 / Ch4 / Sa3.1 / Op10
TTF	TrueType Font	truetype	.ttf	Fx3.5 / Ch4 / Sa3.1 / Op10
SVG	Scalable Vector Graphics	svg	.svg	Ch4 / Sa3.1
SVGZ	Gzipped SVG	svg	.svgz

様々なフォントをダウンロードできるサイトがあります。

http://www.fontfontfont.com/

フォントの形式を変換できるサービスもあります。

http://onlinefontconverter.com/

下記の例では、システムに Marumoji フォントがあればそれを使用し、無ければ EOT、無ければ WOFF、無ければ TTF 形式のフォントを使用します。

CSS

@font-face {
  font-family: myfont;
  src: local(Marumoji),
       url(font/Marumoji.eot) format('embedded-opentype'),
       url(font/Marumoji.woff) format('woff'),
       url(font/Marumoji.ttf) format('truetype');
}

フォントファイルは通常、同じドメインのサーバからしかダウンロードできません。他のドメインからダウンロードするには、CORS(Cross-Origin Resource Sharing)を用います。

CSS - @font-face

概要

説明

リンク