メインコンテンツへ移動
Boletolibre

イベントサイトの Web フォント読込方法を選ぶ

イベント名は独自書体でも、日付、会場、価格、購入ボタンは早く読める必要があります。文字の役割ごとにファイル、代替書体、読込中の表示を決めます。

Boletolibre編集部

公開日

ブランド表示、すぐ読める情報、六言語の安定したレイアウトを両立します。
イベント名は独自書体でも、日付、会場、価格、購入ボタンは早く読める必要があります。文字の役割ごとにファイル、代替書体、読込中の表示を決めます。

用途と言語を一覧にする

トップ、申込、チケットページの書体、太さ、ファイルを記録します。ブランドと実用情報を分けます。英西独仏日蘭の文字を確認し、ラテン文字だけのファイルで日本語を賄えると思わないでください。加工前にライセンスを確認します。[1]

読込中の表示を選ぶ

swap は代替文字をすぐ示しますが後の置換で位置が動く場合があります。optional は遅い時に代替を保てます。block は文字を隠す場合があります。役割別に選び、狭い画面で改行を比べます。[1]

必要なファイルだけを優先

CSS と書体ファイルの取得時刻を確認します。不要な太さを除き、外部提供と自前配信を測って比べます。事前読込は本当に重要なファイルに絞り、画像との競合を見ます。[1]

参加者の訪問を確認

各言語で初回と再訪を試します。日付、価格、フォーム、日本語やアクセント付き文字が読めるか、文字の切替で購入ボタンが動かないか確認します。[1][2]

書体の判断表をダウンロード(英語 Markdown)

出典と参考資料

  1. Best practices for fontsweb.dev · 確認日
  2. Optimize Cumulative Layout Shiftweb.dev · 確認日