Bungeeの使い方｜英字のゲーム見出しを作り、日本語の表示も確かめる

今回の仕上がり

David Jonathan Ross様のBungee Regularで、英字と数字の「PLAY 2026」を表示する作例です。「標準書体に切り替える」を押すと、同じ文字を端末の書体と見比べられます。日本語の「星あつめ」はBungeeの字形ではありません。

作例・フォント・OFL全文のZIPを保存

BungeeでPLAY 2026を表示し、日本語を別書体で並べた自作例の実画面 — 配布されたフォントを実際に読み込みました。作例の配置と操作コードは編集部制作です。タップして拡大できます。

公式から保存する

作者の公式紹介で書体と用途を確認します。
Google Fontsの公式配布ファイルを開き、「Raw」からTTFを保存します。
同じフォルダーのOFL.txtも残します。
ZIP作例を展開し、example.htmlを開きます。標準書体へ切り替わることを確認します。

保存したTTFは118,996バイトでした。今回の作例ではファイルを端末やサーバーから直接読み込み、OS全体へのフォントインストールはしていません。無料の公式配布を使い、購入・登録は行っていません。

見出しへ配置する

@font-face {
  font-family: Bungee;
  src: url("Bungee-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
.title { font-family: Bungee, system-ui, sans-serif; }

今回の通常版は太さ400で指定しました。作者の紹介にある色付き・縦組みの別版まで同じファイルに入っているとは扱いません。短い英字見出しに使い、説明や操作ボタンは読める通常の書体で残します。

英字と日本語が別の書体になる理由を、自作の2段比較で確かめられます。日本語に統一したい場合は、日本語書体の確認例も参考にしてください。

OFLと確認範囲

2026年10月15日、TTFの保存、PCブラウザでの読み込み、書体切り替えを確認。日本語全体に対応するフォントではありません。スマホ実機、全グリフ、別のBungeeバリエーション、長文の読みやすさを利用者テストした結果は未確認です。最近の流行や作者のAI利用も断定しません。