Webフォントとは？woff2と表示の仕組み

Webフォントとは

Webフォントとは、利用者の端末に入っているフォントに頼らず、Webページ側でフォントファイルを配信して使う仕組みです。これにより、見る人の環境に関わらず、制作者が意図したデザインの書体でページを表示できます。

従来は、端末に入っている標準的なフォントの範囲でしかデザインできませんでした。Webフォントを使えば、ブランドに合った書体や特徴的な見出し用の書体などを、どの端末でも同じように見せられます。

Webフォントは、CSSでフォントファイルの場所と名前を定義し、要素にそのフォントを指定して使います。フォントファイルはページ表示時にダウンロードされるため、読み込みの仕方が表示の体感に影響します。

woff2とは

woff2は、Webフォント向けに作られたフォントファイルの形式の一つで、現在広く使われています。最大の特徴は圧縮率の高さで、同じフォントでもファイルサイズを小さく抑えられるため、ダウンロードが速く済みます。

ファイルが軽いほど、フォントが届くまでの待ち時間が短くなり、後述する表示のちらつきや遅延も抑えやすくなります。そのため、Webフォントを配信するときはwoff2を主に使うのが一般的です。

実務ではどこで関係する？

Webフォントは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

Webフォントについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

FOUTとFOITの仕組み

Webフォントはダウンロードに時間がかかるため、フォントが届くまでの間、ブラウザはテキストの見せ方を選ばなければなりません。この選び方の違いから、FOUTとFOITという二つの現象が生まれます。

• FOUT: まず代替フォントで文字を表示し、Webフォントが届いたら差し替わる。文字は早く読めるが、書体が一瞬入れ替わる
• FOIT: Webフォントが届くまで文字を表示しない。ちらつきはないが、その間は文字が見えず空白になる
• どちらが起きるかは、CSSのフォント表示の指定やブラウザの挙動によって変わる
• font-display という指定で、待つか先に代替を出すかの方針を選べる

Webフォントの表示を整える手順

ちらつきや遅延を抑えるには、フォントの軽量化と表示方針の指定が鍵になります。次の手順で見直しましょう。

1. 配信するフォントをwoff2形式で用意し、ファイルを軽くする
2. 必要な文字や太さだけに絞り、読み込むフォントの量を減らす
3. CSSのフォント定義で font-display を指定し、表示方針を決める
4. 代替フォントを指定し、Webフォントが届く前でも読める状態にする
5. ブラウザで開き、読み込み時のちらつきや遅延が許容範囲か確認する

共有環境でフォント表示を確かめる

Webフォントの見え方は、回線の速さや初回読み込みかどうかで変わります。自分の環境では速くても、相手の環境ではちらつきが目立つことがあるため、共有URLで実際に確かめると安心です。

ギガサイト便はCSSやフォントファイルを含むZIPをそのまま共有URLにでき、CDNのエッジ配信で表示が速いのが特徴です。相手にURLを渡してフォントの読み込みやちらつきの見え方を確認してもらう、というレビュー用途に向いています。