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.otf') format('truetype'),
  src: url('../fonts/myfont.woff') format('woff');
}

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

 

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

/* Webフォントを定義 */
@font-face {
  font-family: 'myfont';/* ←フォント名 */
  src: url('../fonts/myfont.otf') format('truetype'),
  src: url('../fonts/myfont.woff') format('woff');
}

最初に@font-faceでWebフォントを定義します。font-familysrcプロパティが必須です。

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

 

srcにはurl()でフォントまでのパス、format()でフォーマットを指定します。フォーマット(拡張子)が違うファイルが複数ある場合は,で区切って複数指定できます。

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

 

ちなみにfont-familyでつけるフォント名とWebフォントのファイル名は同じでなくても大丈夫です。

例えばWebフォントのファイル名がspecial-font.otfでもfont-family: 'myfont';と定義すれば、body { font-family: 'myfont', sans-serif; }みたいに指定できます。

それと、僕はsrc: url('')url()部分を書き忘れてフォントが適用されずにハマることがよくあるのでみんなも気をつけましょうね。

 

srcにフォントを複数指定すると、最初のフォントが何らかの理由で読み込めなかった場合に次のフォーマットのフォントを読み込む、といったことができます。

 

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の書き方が間違っていないか?
  • フォント名は正しいか?

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

 

まとめ

Webフォントは使う回数がそこまで多くないので忘れがちになりますね。

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

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