CSSでWebフォントを使う方法【@font-faceの使い方】

今回はCSSの@font-faceを使ってローカルにダウンロードしたWebフォントを使う方法を解説します。

@font-faceを使ってローカルのWebフォントを使う方法
1. @font-familyでWebフォントを定義
2. 定義したフォントを指定する
複数のweightやstyleのフォントを読み込む
ローカルのWebフォントが読み込めない場合
ブラウザサポートの観点から見るWebフォント
まとめ

@font-faceを使ってローカルのWebフォントを使う方法

使い方はこんな感じです。

/* Webフォントを定義 */
@font-face {
  font-family: 'myfont'; /* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url('../fonts/myfont.ttf') format('truetype');
  src: url('../fonts/myfont.woff') format('woff');
}

/* @font-faceのfont-familyでつけた名前を指定 */
body {
  font-family: 'myfont', sans-serif;
}

urlはカンマ区切りでも指定できます。

src: url('../fonts/myfont.ttf') format('truetype'),
  url('../fonts/myfont.woff') format('woff');

詳しく解説していきます。

@font-familyでWebフォントを定義

/* Webフォントを定義 */
@font-face {
  font-family: 'myfont';/* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url('../fonts/myfont.ttf') format('truetype');
  src: url('../fonts/myfont.woff') format('woff');
}

最初に@font-faceでWebフォントを定義します。font-familyとsrcが必須です。formatはなくても大丈夫です。

font-familyは自分の好きな名前をつけて構いません。ここでつけた名前がフォントを指定する際に使われます。

srcにはurl()でフォントまでのパスを指定します。このCSSファイルが基準です。myfont.ttfの部分はフォントのファイル名をそのまま拡張子までコピペするのがミスがなくて確実ですね。

ちなみにフォントによってはファイルの拡張子が大文字（.TTFとか）だったりしますが、拡張子の大文字小文字も揃えないと「ローカルでは表示されるのに本番サイトではフォントが読みまれない」みたいな謎のバグが起きるので注意しましょう。

Webフォントのファイル名とfont-familyの名前は違ってもok

例えばWebフォントのファイル名がspecial-font.ttfでも'myfont'という名前で読み込んだりできます。

/* Webフォントを定義 */
@font-face {
  font-family: 'myfont';/* フォント名 */
  /* フォーマットごとにパスを指定 */
  src: url('../fonts/special-font.ttf') format('truetype');
  src: url('../fonts/special-font.woff') format('woff');
}

srcで読み込んだフォントはfont-familyで指定した名前で使える様になると覚えておきましょう。

僕はsrc: url('')のurl('')部分を書き忘れてフォントが適用されずにハマることがよくあるのでみんなも気をつけましょうね。ちなみにクオーテーションは無しでも問題なく読み込めます。

フォーマット毎に複数フォントを読み込む理由

srcにフォントを複数指定すると、最初のフォントが何らかの理由で読み込めなかった場合に次のフォーマットのフォントを読み込むことができます。フォーマットによってはブラウザが読み込めなかったりするのでその対策ってことですね（詳しくは後述）。

まあ正直読み込むフォントは1つでも全然大丈夫だとは思いますが、複数のフォーマットのフォントが用意できたらとりあえず読み込んでおくのがいいのではないでしょうか。

format()の必要性と指定できる値

format()の必要性はブラウザがフォーマットを認識する手助けになるというものなので、ないよりはマシ程度のものです。別に指定しなくても何の問題もありません。

format()にはフォーマット情報を書きます。利用可能なフォーマット形式は以下の通りです（拡張子：フォーマット）

.woff：'woff'
.woff2：'woff2'
.ttf：'truetype'
.otf：'opentype'
.eot：'embedded-opentype'（IEのみ）
.svg：'svg'

.ttfファイルならformat('truetype')みたいな感じです。

まとめると、@font-face内のfont-familyで好きなフォント名をつけて、srcにパスを指定すればokです。

定義したフォントを指定する

/* @font-faceのfont-familyでつけた名前を指定 */
body {
  font-family: 'myfont', sans-serif;
}

定義したフォントを指定するには、セレクタのfont-familyに@font-faceで定義した名前を指定します。これでフォントが適用されるはずです。

複数のweightやstyleのフォントを読み込む

読み込んだフォントにfont-weight: boldやfont-style: italicを指定したい場合は、その太さのフォントを読み込むと同時にweightやstyleを指定します。

/* normal */
@font-face {
  font-family: 'myfont';
  src: url('../fonts/myfont.ttf') format('truetype');
  src: url('../fonts/myfont.woff') format('woff');
}
/* bold */
@font-face {
  font-family: 'myfont';
  src: url('../fonts/myfont-bold.ttf') format('truetype');
  src: url('../fonts/myfont-bold.woff') format('woff');
  font-weight: bold; /* boldが使えるようになる */
}
/* italic */
@font-face {
  font-family: 'myfont';
  src: url('../fonts/myfont-italic.ttf') format('truetype');
  src: url('../fonts/myfont-italic.woff') format('woff');
  font-style: italic; /* italicが使えるようになる */
}

通常、太字、イタリックのWebフォントを用意しそれぞれ読み込みますが、font-familyで指定するフォント名は全て同じにするのがポイントです。

また、太字なら@font-face内でfont-weight: bold、イタリックならfont-style: italicというように指定します。

これでfont-weight: boldやfont-style: italicを指定するだけで太字やイタリックが使えます。

/* normal */
.text {
  font-family: 'myfont', sans-serif;
}
/* bold */
.text-bold {
  font-family: 'myfont', sans-serif;
  font-weight: bold:
}
/* italic */
.text-italic {
  font-family: 'myfont', sans-serif;
  font-style: italic;
}

ただ、フォントによっては上のようなことをしなくてもfont-weight: boldだけで太字になったりするので、とりあえずfont-weight: boldで太字になるのか試してみて、ならなかったら上記の方法を使うのがいいと思います。

ローカルのWebフォントが読み込めない場合

もしフォントが適用されていなかったら、

srcにパスのミスはないか？
@font-faceの書き方が間違っていないか？
フォント名のスペルミスをしていないか？

など確認してみてください。

上記のどれでもないのにフォントが読み込めない場合はフォント自体が壊れてる可能性があります。微妙に怪しいサイトからダウンロードしたフォントだとたまにあります（ウイルスとか入ってそうで怖い）。

Font Squirrelというサイトにダウンロードしてきた怪しいフォントをアップして見てください。「This font is broken!」みたいなアラートが出たらフォント自体が壊れているのでちゃんとしたところからダウンロードし直しましょう。

それでも読み込めない場合は拡張子を変えてみるという方法があります。フォントは.ttfと.woffの2種類あれば大体ちゃんと読み込まれるはずです。

Convertioというサイトで色々なファイルの拡張子を変換できるのでここで.ttfや.woffに変換して読み込んでみてください。

これでも読み込まれない場合は…わかりませんm(__)m

ブラウザサポートの観点から見るWebフォント

フォントの拡張子（フォーマット）は色々ありますが、ブラウザサポートの観点から見るとこんな感じになるらしいです（参考：Using @font-face | CSS-Tricks）

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

.eotはIE9以下専用（2回指定してるのはバグ回避用らしい）、.svgはiOS4.1以下という太古のフォーマットなのでこれらは無視でok。.woffと.woff2が軽くてモダンだけどIE11では使えないみたいなので.ttfも読み込んでおくという感じでしょうか。.otfはよくわかりません。

つまり.woff（.woff2）と.ttfの2種類を読み込んでおけばokだと思います。

この辺が気になる人は上のリンクの記事を読んでみると結構面白いです。