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

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

今回はCSSの@font-faceを使ってローカルにダウンロードした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;
}

 

srcurlはカンマ区切りで指定することもできます。

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-familysrcが必須です。formatはなくても大丈夫です。

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

srcにはurl()でフォントまでのパスを指定します。このCSSファイルが基準です。myfont.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で読み込んだフォントはfon-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で定義した名前を指定します。これでフォントが適用されるはずです。

 

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

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

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

 

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

読み込んだフォントにfont-weight: boldfont-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: boldfont-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フォントは使う回数がそこまで多くないので忘れがちになりますね。

もし変なミスしてハマるのが怖い人はエディターのスニペットなどに登録しておくとラクだと思います。

スポンサーリンク
CSS
スポンサーリンク
でざなり