CSS - @font-face

トップ > CSSリファレンス > @font-face

概要

ルール名 @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名拡張子サポート
WOFFWeb Open Font Formatwoff.woffIE9 / Fx3.6 / Ch6 / Sa5.1 / Op11
EOTEmbedded OpenTypeembedded-opentype.eotIE4
OTFOpenType Fontotf.otf .ttfFx3.5 / Ch4 / Sa3.1 / Op10
TTFTrueType Fonttruetype.ttfFx3.5 / Ch4 / Sa3.1 / Op10
SVGScalable Vector Graphicssvg.svgCh4 / Sa3.1
SVGZGzipped SVGsvg.svgz

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

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

下記の例では、システムに 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)を用います。

リンク


Copyright (C) 1997-2018 杜甫々
初版:1997年7月27日、最終更新:2018年1月7日
http://www.tohoho-web.com/css/rule/font-face.htm