font-face CSS3

font-face は、Webサーバー上にあるフォントを指定する時に使います。ユーザー環境に無いフォントでも、ページの制作者が意図したフォントを表示できるようになります。 指定は、① 使いたいフォントをサーバーにアップロード、② @font-face ルールでフォントを定義、③ 要素でスタイル指定、といった流れになります。

※ Webフォントのライセンスには注意が必要です。利用規定などをよく確かめて使いましょう。

 CSSソース

  @font-face {
      font-family: myfont;
      src: url(myfont.woff);
  }

  p { font-family: myfont, serif; }

フォント記述子 font-family にフォントファミリー名（任意の名前）を、フォント記述子 src にフォントのURLを指定します。（省略不可）

フォント記述子 src は、フォント形式を format() で指定することができます。ブラウザやバージョンによって対応しているフォント形式が異なりますので、 同じフォントを表示したい場合は、フォント形式を変換するなどして複数指定しておくと良いです。先に指定したフォントが優先的に表示されます。

format()に指定する文字列フォント形式（フォントフォーマット）一般的な拡張子
woffWOFF (Web Open Font Format).woff
truetypeTrueType.ttf
opentypeOpenType.ttf, .otf
embedded-opentypeEmbedded OpenType.eot
svgSVG Font.svg, .svgz
 CSSソース

  @font-face {
      font-family: myfont;
      src: url(myfont.woff) format("woff"), 
      url(myfont.ttf) format("truetype");
  }

ユーザーがローカル環境で既にそのフォントを持っているならば、それを利用します。local(フォント名) で指定できます。

 CSSソース

  @font-face {
      font-family: myfont;
      src: local(myfont),
      url(myfont.woff) format("woff"),
      url(myfont.ttf) format("truetype");
  }

@font-faceルールでフォントを定義するのに使用されるフォント記述子（descriptor）はCSSプロパティと同じ名称になっており、値もほぼ同じものが指定できます。

Value（値）

font-family
フォントファミリー名（任意の名前）
src
url()、url() format()、local()
font-style
normal、italic、oblique
font-weight
normal、bold、100、200、300、400、500、600、700、800、900
font-stretch
normal、ultra-condensed、extra-condensed、condensed、semi-condensed、semi-expanded、expanded、extra-expanded、ultra-expanded
font-variant
normal、small-caps
font-feature-settings
OpenTypeフォント機能の有効/無効を指定
unicode-range
使用する文字範囲をUnicodeで定義

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
    @font-face {
        font-family: myfont;
        src:url(myfont.eot) format("embedded-opentype"),
            url(myfont.ttf) format("truetype"),
            url(myfont.woff) format("woff");
    }
    p { font-family: myfont, serif; }
  </style>
 </head>
 <body>
   <p class="test1">ABCDEFGHIJ</p>
 </body>
</html>

display

ABCDEFGHIJ

※ このページの為にフォント作りました。A～J までですけど。笑。

上に戻る