Web フォント
よみ: ウェブフォント
Web サーバーから専用のフォントファイルを配信し、ユーザーの PC やスマホの環境に関係なく、指定した統一フォントで表示させる仕組みです(代表的なサービス：Google Fonts、Adobe Fonts など)。ブランドの統一感やデザイン品質を大きく高めることができます。
最大の鉄則：「ブランド表現」と「表示速度」のバランス
和文(日本語)フォントは、欧文に比べて文字数が膨大でファイルサイズが重いため、何も考えずに導入するとページ速度が著しく低下します。「デザインは綺麗になったけれど、サイトが重くて離脱される」という事態を防ぐことが、Web 担当者の重要な役目です。
実務でのアクション：速度低下を防ぐ 3 つの技術
制作会社に Web フォントの導入を依頼する際は、以下の対策をセットで要求しましょう。
- フォント数の最小化：読み込むフォントの種類や太さ(ウェイト)を、極力絞る。
- サブセット化：第一水準漢字やよく使う文字だけを抽出し、ファイルを軽量化して配信する。
display=swapの指定：Web フォントが読み込まれるまでの間は、ユーザーの端末に入っている標準フォントで文字を先行表示させ、ユーザーを待たせないようにする設定。
現場で陥りやすい「落とし穴」
最も多い失敗は、複数の Web フォントを無頓着に読み込み、ページが重くなって SEOの重要指標である「Core Web Vitals(コアウェブバイタル)」が悪化してしまうことです。導入の第一歩は、「本当にその Web フォントが必要か」を疑い、種類を最小限に絞ることから始まります。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
会話上での使用例
ブランドフォントのWeb表示について、デザイナーとWeb担当者が相談する場面
-
デザイナー
ブランド指定のフォントを、サイト上でもそのまま表示したいんですが可能ですか。
-
Web担当者
Web フォントとして配信すれば実現できます。ただ和文フォントは重くなりがちなので、表示速度への影響を確認して、使う文字だけ配信するサブセット化も検討させてください。
-
デザイナー
見た目を保ちつつ軽くできるなら安心です。
ページが遅い原因をSEO担当者とWeb担当者で調べる場面
-
SEO担当者
計測してみたらページの表示がかなり遅いんですが、原因の心当たりはありますか。
-
Web担当者
Web フォントの読み込みが効いている可能性があります。表示の指定をswapにして読み込み中も文字が出るようにしつつ、サブセット化で容量を絞れば改善できるはずです。
-
SEO担当者
では、まずフォントまわりから見直しましょう。