Webフォントの使い方

フォントはユーザーのパソコン環境に依存しますので好みのフォントを指定してもほとんど無駄でした。
ところが、Webフォントの仕組みができてからは特定のフォント指定に明るい兆しとなったわけです。

今回は自分のサーバーにフォントを用意してWebフォントとして使用する方法の説明です。
訓練生の質問や要望も高い内容です。けれども表示スピードの問題など今一度検討する必要はありそうです。

Webフォントとは

サーバー上に特定のフォントを置いておき、それをユーザーのPCにダウンロードさせて特定のフォントを表示する仕組みです。そのため、ユーザーのPCに特定のフォントが用意されてなくてもブラウザ上で表示可能となります。

フォントの定義〜@font-faceルール

自分のサーバーに置いたフォントを定義するには@font-faceルールを使用します。

@font-faceで定義する内容は、大きく分けると「フォント名」、「フォントの種類」、「フォントファイルの場所」の指定です。
@font-faceで定義することでサーバーに置いたフォントをユーザーが自分のPCで読み込むことができるようになります。

@font-faceルールの作り方

@font-faceルールの書き方は次のとおりです。

@font-face {
　　　font-family : font-family名;
　　　src : local(’font-family名’) , url(’アドレス’) format(’フォーマット’);
}

1. font-familyプロパティは、公開するfontに好きな名前を定義します。フォントファイル名と違ってもOKですがそのフォントとわかる名前にしておきましょう。
   また、カンマ（,）で区切ることで複数の指定ができます。
2. srcプロパティはフォントの場所を指定します。
3. local()はユーザーがすでに該当のフォントをインストールしている場合に役に立ちます。( )の中はフォント名を指定します。もしフォントがインストールされていればダウンロードすることもなく該当フォントを使用しますが、IE8から古いバージョンでは使えません。また相性の問題でトラブルの原因になることもあるようです。リスクを考えると省略した方がよいかもしれません。
   一方url()は重要な役割を担っていますので必ず指定します。
4. formatはフォントの形式を指定します。

具体的には以下のように書きます。ただし、この書き方はクロスブラウザ（IEなど）には対応していません。すべてのブラウザに最適化した書き方はこの先で説明します。

シンプルな@font-faceルールの例

フリーのJKゴシックMを使用したサンプル

/*@font-faceルール*/
@font-face {
 font-family: jk-font;
 src:url('jk_font/JKG-L_3.woff') format('woff');;
}

/*要素へのフォント指定*/
p{
  font-family:jk-font;
}

複数の@font-faceの定義

複数の@font-faceの定義とは、太字や斜体ごとに@font-faceを定義することです。
具体的には先ほどの@font-faceルールに従い、太字の設定と斜体の設定を別々に記述します。
2種類のWebフォントを@font-faceに定義して使用したサンプル

@font-face {
  font-family: jk-font;
  font-style: normal;
  font-weight: 200;
  src:url('jk_font/JKG-L_3.woff') format('woff');
}

@font-face{
  font-family: jk-font;
  font-style: normal;
  font-weight: 700;
  src:url('jk_font/JKG-M_3.woff') format('woff');
}
p{
  font-family: jk-font,cursive;
  font-weight: 200;
}
h1{
  font-family: jk-font,cursive;
  font-weight: 700;
}

互換性の高い@font-faceの書き方

すべてのブラウザでフォントを表示させるには以下のような書き方をします。
eot拡張子のものはIE８以下のブラウザが対象です。src: url(‘jk_font/JKG-L_3.eot?#iefix’) format(‘embedded-opentype’)はIE9対策です。TTF形式はAndroid4.3以前の対策です。
サンプル

@font-face {
  font-family: jk-font;
  font-style: normal;
  font-weight: 200;
  src: url('jk_font/JKG-L_3.eot');
  src: url('jk_font/JKG-L_3.eot?#iefix') format('embedded-opentype'),
  url('jk_font/JKG-L_3.woff') format('woff'),
  url('jk_font/JKG-L_3.ttf')  format('truetype');
}
@font-face{
  font-family: jk-font;
  font-style: normal;
  font-weight: 700;
  src: url('jk_font/JKG-L_3.eot');
  src: url('jk_font/JKG-L_3.eot?#iefix') format('embedded-opentype'),
  url('jk_font/JKG-L_3.woff') format('woff'),
  url('jk_font/JKG-L_3.ttf')  format('truetype');
}
p{
	font-family: jk-font,cursive;
	font-weight: 200;
}
h1{
	font-family: jk-font,cursive;
	font-weight: 700;
}

WEBFONT GENERATORを利用すると上記の必要な形式に変換してくれたりCSSを書き出してくれたりします。（お茶一杯飲むくらい待ちます）