通常ウェブページを開いたときにブラウザは端末にインストールされているフォントを使用してウェブページを表示します。

「Webフォント」はフォントのファイルをサーバー上に置いておき、ウェブページを表示するときにこれを使うことでフォントを表示するための技術です。

Webフォントとして使用することができるフォントの形式には次のものがあります。

• woff(Web Open Font Format)
• woff2(Web Open Font Format 2)
• ttf(True Type Font)
• otf(Open Type Font)
• eot(Embedded Open Type)
• svg(Scalable Vector Graphics Font)

WOFF (Web Open Font Format)

Mozilla が Type Supply や LettError、他の組織と提携して開発した Web フォント形式です。

WOFF は、フォントデータが圧縮されているため、帯域を抑えることができ読み込み時間が短縮できます。

なお、WOFF と WOFF2 という2 つのバージョンの WOFF があります。

@font-face では format 記述子で、それぞれ 'woff' と 'woff2' で識別されます。

デモ

デモページ

Webフォントの使い方

font-displayというCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示に使用することができるようになります。

記載方法はWebフォントの種類によって異なります。

@font-face {
  font-family: 'フォントの名前';
  src: url('eotファイルのURL');
  src: url('eotファイルのURL?iefix') format('eot'),
  url('woffファイルのURL') format('woff'),
  url('woff2ファイルのURL') format('woff2'),
  url('ttfファイルのURL') format('truetype'),
  url('svgファイルのURL#svgFontName') format('svg');
}

CSSでwebフォントの読み込みが遅い問題を改善する方法

ページのロードをしてからテキストが表示されるまでの間、ユーザーはテキストを読むことができない場合、ページの離脱を引き起こします。

「font-display」というCSSプロパティを用いることで、webフォントを読み終えるまではローカルフォントを代替的にロードし、テキストの表示に使用することができるようになります。

具体的には、下記のようにfont-faceに対して「font-display: swap」を指定することで、適応できます。

サンプルコード

フォントをロードします（例では「font name」）

@font-face {
  font-family: "font name";
  font-weight: 400;
  font-style: normal;
  src: url("font name.woff2") format("woff2");
  font-display: swap;
}

「font-weight」プロパティは、フォントの太さを指定する際に使用します。

• normal ・・・ 標準の太さです（数値で400を指定した場合と同じ）
• bold ・・・・ 一般的な太字の太さです（数値で700を指定した場合と同じ）

また「font-style」プロパティは、フォントのスタイルを指定する際に使用します。

• 標準（normal）
• イタリック体（italic）
• 斜体（oblique）

次に、文字に適用するために次のようなスタイルシートを用意します。

p {
  font-family: "font name", sans-serif;
}

上記のスタイルを適応すると、webフォントが読み込まれるまでは一時的にsans-serifを読み込んだ上でテキストの表示に使用されます。

ローカルに指定のフォントがなければWebフォントを利用するCSSの指定方法

例えば、「Noto Sans JP」のWebフォントを利用すれば、すべての機器で文字表現を統一できます。

ローカルに「Noto Sans CJK JP」がインストールされているなら、Webフォントを読み込まずにそちらを利用する方法となります。

@font-face {
   font-family: 'Noto Sans JP';
   font-style: normal;
   font-weight: 400;
   src: local('Noto Sans CJK JP Regular'),
        local('NotoSansCJKjp-Regular'),
        local('NotoSansJP-Regular'),
        url(ファイルパス/NotoSansJP-Regular.woff2) format('woff2'),
        url(ファイルパス/NotoSansJP-Regular.woff) format('woff'),
        url(ファイルパス/NotoSansJP-Regular.otf) format('opentype');
   font-display: swap;
}

「src: local…」の部分で設定しています。

3つ設定している理由は、ブラウザがどのフォント名を使用するのかは、プラットフォームやフォントによって異なるためです。

エラーが表示された場合

Chromeのデベロッパーツールのコンソール上に次のようなエラーが表示された場合は、改行コードの変換が正しく行われていません。

Failed to decode downloaded font
OTS parsing error: incorrect file size in WOFF header

いくつかのオンライン変換ツールで変換したWOFF2をロードしてみると上記のエラーが表示されたので、変換するサイトには気をつけましょう。

因みに、「OTF to WOFF2 Converter」を使ったところエラーは回避できました。

オススメ書籍

HTML5、CSS3、JavaScript等の学習に役立つ書籍を紹介します。

ページのトップへ戻る