このページの中身

Webフォントの実装

書体を配信するなら、届くまでの数秒をどう見せるかまで決めます。決めなければ、文字が消える時間ができます。

Webフォント読み込み時のFOITとFOUTの違いを時間軸で比較した図
図を大きく見る
図の中身を文字で読む
  • FOIT　font-display: block　届くまで文字が出ない。遅い回線ほど長く空白が続く　和文は重い
  • 収録字数が数千から数万あり、
  • 無圧縮では数MBになる。
  • （空白）　（空白）　本文が出る　サブセット化は必須。
  • 使うウェイトだけを読み込む。
  • FOUT　font-display: swap　Regular と Bold で2ファイル。
  • 代替書体ですぐ出す。届いたら差し替わる　読み込まないウェイトを指定すると、
  • ブラウザが機械的に太らせて字形が崩れる。
  • 本文が出る　本文が出る　本文が出る　差し替えのずれを抑える
  • size-adjust と ascent-override で
  • 0秒　フォント到着　代替書体の見た目を本命に寄せる。

ひと目で#

Webフォント
サーバーから配信して使う書体。端末に入っていなくても表示できる
FOIT
届くまで文字が出ない（font-display: block）
FOUT
代わりの書体で先に出し、届いたら差し替える（font-display: swap）。こちらを選ぶ
サブセット化
使う文字だけを抜き出して軽くする。和文では必須
バリアブルフォント
1ファイルでウェイトを連続的に変えられる形式
フォントスタック
候補の並び。読み込みに失敗しても文字は出る

使い分け#

こういうときやること
本文、UI、管理画面Webフォントを使わない（system-ui）
書体がブランドの核見出しだけ Webフォント
和文を配信するサブセット化。または unicode-range で分けて配信
ウェイトを3種類以上使うバリアブルフォント
ウェイトが2種類以下静的な2ファイルのほうが軽い
差し替えのずれを抑えたいsize-adjust と ascent-override
Webフォントを配信するかどうかの判断の流れと、配信する場合のファイル構成の分岐を示した図
図を大きく見る
図の中身を文字で読む
  • 配信するかどうかを先に決める　配信するなら、ファイル構成
  • 本文・UI・管理画面に使う文字？　はい　配信しない　ウェイトを3種類以上使う
  • 量が多く、速さが最優先　system-ui で組む　バリアブルフォント1ファイル
  • いいえ　ウェイトが2種類以下
  • 静的な2ファイルのほうが軽い
  • その書体はブランドの核？　はい　見出しだけ配信する
  • 声そのものが売りになっている　本文は端末の書体のまま　和文を配信する
  • サブセット化が必須
  • いいえ
  • どの構成でも font-display: swap と
  • 配信しない　迷ったら足さない。転送は戻らない　総称ファミリーまでのスタックを書く。
  • 配信は「書体が要る」の証明から。先に system-ui で組んでみて、それでも失われる声だけを読み込む。

和文フォントを実際に軽くする手順は、和文フォントを軽くする に完成コマンドごとまとめました。

間違えやすいところ#

font-display の値ごとに、読み込み中の画面がどう見えるかの実測コマ
図を大きく見る

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

和菓子店のサイトで、見出し用に明朝の Web フォントを入れた現場です。指定を確認すると、4ウェイトを全ページで読み込み、本文にまで当てていました。回線が細いと本文が2回描き直され、その揺れが CLS として計測に出ます。

読み込みは見出しに使う Regular と Bold の2ファイルへ絞り、font-display: swap で先に代替書体を出します。本文は端末のゴシックに戻します。和文フォント自体を軽くする手順は 和文フォントを軽くする にまとめました。

確認する#

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

Webフォントを使うと表示が遅い

1書体に絞る。preload と font-display: swap を付け、数百KBを超えるならサブセット化する。

このコードで動いている見本です

読み込み中に文字が出ない時間がある

font-display が block になっている。swap にすると代替書体で先に出る。

このコードで動いている見本です

書体が入れ替わるときガタつく

size-adjust と ascent-override で代替書体の見た目を本番に寄せる。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は文字を読ませるにまとめてある。逆引きには全188件。

Webフォントを試す#

Google Fonts の日本語書体を68件すべて並べています。一覧を上下キーで送ると、送るたびに下の見本がその書体になります（確定を待ちません）。読ませ方（font-display）と配信方法を選ぶと、貼り付けるコードにそのまま反映されます。

  • Aoboshi One明朝　400
  • BIZ UDGothicゴシック　400・700
  • BIZ UDMincho明朝　400・700
  • BIZ UDPGothicゴシック　400・700
  • BIZ UDPMincho明朝　400・700
  • Cherry Bomb One装飾　400
  • Chokokutai装飾　400
  • Darumadrop One装飾　400
  • Dela Gothic One装飾　400
  • DotGothic16ゴシック　400
  • Hachi Maru Pop手書き　400
  • Hina Mincho明朝　400
  • IBM Plex Sans JPゴシック　100・200・300・400・500・600・700
  • Kaisei Decol明朝　400・500・700
  • Kaisei HarunoUmi明朝　400・500・700
  • Kaisei Opti明朝　400・500・700
  • Kaisei Tokumin明朝　400・500・700・800
  • Kapakana手書き　300・400　可変
  • Kiwi Maru明朝　300・400・500
  • Klee One手書き　400・600
  • Kosugiゴシック　400
  • Kosugi Maruゴシック　400
  • LINE Seed JPゴシック　100・400・700・800
  • M PLUS 1ゴシック　100・200・300・400・500・600・700・800・900　可変
  • M PLUS 1 Code等幅　100・200・300・400・500・600・700　可変
  • M PLUS 1pゴシック　100・300・400・500・700・800・900
  • M PLUS 2ゴシック　100・200・300・400・500・600・700・800・900　可変
  • M PLUS Rounded 1cゴシック　100・300・400・500・700・800・900
  • M PLUS Uゴシック　100・200・300・400・500・600・700・800・900　可変
  • Mochiy Pop Oneゴシック　400
  • Mochiy Pop P Oneゴシック　400
  • Monomaniac Oneゴシック　400
  • Murechoゴシック　100・200・300・400・500・600・700・800・900　可変
  • New Tegomin明朝　400
  • Noto Sans JPゴシック　100・200・300・400・500・600・700・800・900　可変
  • Noto Serif JP明朝　200・300・400・500・600・700・800・900　可変
  • Palette Mosaic装飾　400
  • Potta One装飾　400
  • Rampart One装飾　400
  • Reggae One装飾　400
  • Rock 3D装飾　400
  • RocknRoll Oneゴシック　400
  • Sawarabi Gothicゴシック　400
  • Sawarabi Mincho明朝　400
  • Shippori Antiqueゴシック　400
  • Shippori Antique B1ゴシック　400
  • Shippori Mincho明朝　400・500・600・700・800
  • Shippori Mincho B1明朝　400・500・600・700・800
  • Shizuru装飾　400
  • Slackside One手書き　400
  • Stickゴシック　400
  • Train One装飾　400
  • Tsukimi Roundedゴシック　300・400・500・600・700
  • WDXL Lubrifont JP Nゴシック　400
  • Yomogi手書き　400
  • Yuji Boku明朝　400
  • Yuji Hentaigana Akari手書き　400
  • Yuji Hentaigana Akebono手書き　400
  • Yuji Mai明朝　400
  • Yuji Syuku明朝　400
  • Yusei Magicゴシック　400
  • Zen Antique明朝　400
  • Zen Antique Soft明朝　400
  • Zen Kaku Gothic Antiqueゴシック　300・400・500・700・900
  • Zen Kaku Gothic Newゴシック　300・400・500・700・900
  • Zen Kurenaidoゴシック　400
  • Zen Maru Gothicゴシック　300・400・500・700・900
  • Zen Old Mincho明朝　400・500・600・700・900

文字が届くまでの数秒 Loading 0123

代替書体で先に読ませるか、揃うまで待たせるか。切り替わりの一瞬を、ここで何度でも再現できます。

切り替えの経過がここに出ます。

この道具は JavaScript で動きます。無効の場合は、上の表と既定値のコードを使ってください。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。