Webフォント (Web Fonts)

Web Fontsとは、そのフォントが必要なときにサーバなどからダウンロードし、一時的にインストールして使用できる技術です。この仕組みを利用すると、クライアントがこれに対応したブラウザを使用していれば、クライアントのOSにインストールされていないフォントでも表示できるようになります。

@font-face

@font-face {
  [ font-family: family-name; ] ||
  [ src: [ uri [format(string#)]? | font-face-name ]#; ] ||
  [ unicode-range: urange#; ] ||
  [ font-variant: font-variant; ] ||
  [ font-feature-settings: normal | feature-tag-value#; ] ||
  [ font-stretch: font-stretch; ] ||
  [ font-weight: weight; ] ||
  [ font-style: style; ]
}
Formal syntax - @font-face - CSS | MDN
<style type="text/css">

/* Webフォントの定義 */
@font-face {
    font-family: myFont; /* フォント名の指定 */
    src: url('http://example.com/myFont.ttf');
}

body {
    font-family: myFont; /* 定義されたフォントの利用 */
}
</style>

ブラウザの設定によっては、この指定が無視され代替の記号となります。この設定はたとえばIE9ならば、インターネット オプションの[全般]の[ユーザー補助]にある、[Web ページで指定されたフォント スタイルを使用しない]がそれになります。Firefox cannot render icons from Font Awesome webfont set - Super User

IE9 IE9 (設定で無視) Firefox (設定で無視)

Font Awesome

SIL Open Font Licenseで、さまざまなアイコンが含まれるフォントが提供されています。

これを利用するにはCDNに置かれたデータを参照する方法と、データをダウンロードして必要な情報だけを記述する方法があります。

CDNにあるフォントとスタイルを利用

サーバ上のスタイルを参照するように指定します。

<link rel="stylesheet" type="text/css"
  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Font Awesomeのデータを提供するCDNには、次のようなものがあります。

  • https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css
  • https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css

表示したい文字をFont Awesome Iconsで確認し、そのクラス名を次のように指定します。

<i class="fa fa-glass"></i>

ダウンロードしてフォントだけを利用

Font Awesomeから「font-awesome-x.x.x.zip」の名前のファイルをダウンロードします。そしてそれのfontsフォルダから必要なフォントファイルをコピーし、@font-faceでそのファイルを参照するように指定します。

またFont Awesome Iconsで必要な文字のコードを確認し、それをcontent属性で表示するようにスタイルを定義します。

<style type="text/css">
@font-face {
    font-family: FontAwesome;
    src: url('fontawesome-webfont.woff') format('woff');
}
.foo:before {
    font-family: FontAwesome;
    content: '\f000';
}
</style>

そしてそのクラスを指定して、文字を表示します。

<span class="foo"></span>

フォント形式

Webフォントで利用できるフォント形式には、以下のようなものがあります。

  • TTF (True Type Font)
  • OTF (Open Type Font)
  • EOT (Embedded OpenType)
  • SVG Font (Scalable Vector Graphics Font)
  • WOFF (Web Open Font Format)
Web Fontsの歴史と使い方(1):インストールせずに、好きなWeb Fontsを使おう - @IT ひらいさだあき (2011/09/28)

WOFF (Web Open Font Format)

HTMLの情報サイトから、まとめて検索