今回の完成形
上段はBungeeを優先し、下段は標準書体だけで「PLAY 星あつめ」を表示します。英字は変わるのに、日本語は別の書体のままになる例です。説明を読む前に、切り替えボタンで違いを確かめてください。
上下の文字を比べる
- 読み込み完了の表示を待ちます。
- 上段と下段のPLAYの形を比べます。上段はBungee、下段は標準書体です。
- 「上段を標準書体に切り替える」を押します。上下とも標準書体という表示を確認します。
- 「上段をBungeeに切り替える」で戻します。英字と日本語を一文字ずつ見比べます。
今回は読み込み成功、切り替え、文字の形の差を確認しました。端末を変えれば標準書体も変わるため、どの端末でもこの画面と同じ日本語になるとは限りません。
ファイルの読込と文字対応は別
MDNのfont-family資料では、フォントの選択は文字ごとに行われ、必要な字形がなければ後ろの候補が試されると説明されています。今回の指定は次の順です。
font-family: Bungee, system-ui, sans-serif;保存したBungee Regularの対応表を調べると、P・L・A・Yはあり、星・あはありませんでした。Google Fontsのメタデータにも日本語のサブセットはありません。ファイルを読み込めたことと、表示するすべての文字がそのファイルに入っていることは別です。
CSSのfont-family欄にBungeeと出ていても、それだけでは日本語の実際の字形までBungeeで描かれた証拠になりません。今回の実験は6文字の対応表と表示比較で、全フォントや全グリフを網羅した検証ではありません。
つまずいたときの確認順
まずNetworkでフォントのパスと読込結果、次にfont-familyの名前と順番、最後に使いたい文字の対応を確認します。英字も変わらなければ読み込みや指定を疑い、英字だけ変わるなら文字範囲を確認する、という切り分けです。無理に文字を画像化して隠す必要はありません。
日本語まで統一するなら、日本語に対応する別の書体を選びます。Bungeeの保存と利用条件、Noto Sans JPの実例へ進めます。BungeeはOFL 1.1、自作例はCC0。確認日は2026年10月15日。スマホ実機、全ブラウザ、読み上げの実機は未検証です。