Variable Fontとは？HTML共有・AI生成サイトでの意味をやさしく解説

ひとことで言うと

Variable Fontとは、太さ（weight）・幅（width）・イタリック体などの軸を連続的に変化させられるフォントファイルです。従来は「Noto Sans Light」「Noto Sans Bold」などウェイトごとに別ファイルが必要でしたが、Variable Fontなら1ファイルで`font-weight: 100`から`900`までをカバーできます。

AIが生成するHTMLでVariable Fontが使われている場合、CSSには`font-variation-settings: 'wght' 450`のような記述が含まれることがあります。このプロパティを削除したり上書きしたりすると、デザイン上意図した太さにならないため、カスタマイズ時は慎重に確認が必要です。

• 相手がログインなしで開ける状態か確認する
• PCとスマホで最低1回ずつ表示を確認する
• 内部情報・個人情報・不要な外部送信が残っていないか見る
• レビュー期限と修正時の差し替え方を決めておく

HTML共有で関係する場面

Variable Fontのwoff2ファイルをHTMLと同じZIPに同梱して共有する場合、フォルダ構成が維持されていれば相手のブラウザでもデザイン通りに表示されます。一方でHTMLファイルだけ取り出してメールに添付すると、フォントファイルへのパス参照が切れてシステムフォントに fallback します。ZIPごとURLで共有できるサービスを使うと、この問題を避けられます。

Googleフォントでは多くのフォントがVariable Font形式で配布されており、URLに`ital,wght@0,100..900`のように範囲指定を書いて読み込みます。AIが生成したHTMLにこの形式のGoogleフォントURLが含まれていれば、取引先の端末でもデザイン通りのウェイトで表示されます。

よくある誤解

「Variable Fontは全ブラウザで動く」というのは現在はほぼ正しいですが、2020年以前のブラウザは対応していません。法人端末でInternet Explorerを使っている環境では完全に無視されます。IEユーザーが共有先にいる場合は、通常の静的ウェイトのフォントをフォールバックとして`@font-face`に追加しておくことが必要です。

「Variable FontはファイルサイズがWebフォントより小さい」という誤解があります。実際にはすべての軸のデータを1ファイルに含むため、個別ウェイトファイルより大きくなることがあります。ただし複数ウェイトを使うページ全体で見ると、4ウェイト以上使う場合は1ファイルの方がトータルで軽くなる傾向があります。

安全に使うための注意点

Variable Fontファイルをサーバーに置いて共有する際は、フォントファイルのURLが誰でもアクセスできる状態になっていないか確認してください。パスワード付き共有ページの内部で参照されていても、フォントファイルのURLが推測しやすいと直接ダウンロードされるリスクがあります。重要なカスタムフォントはCORS制限やHTTPリファラーチェックを設定して保護しましょう。

CSSの`font-variation-settings`を使って複数の軸を同時に指定している場合、一方の軸だけCSSで上書きすると設定全体がリセットされることがあります。例えば`font-variation-settings: 'wght' 700`と別途`font-weight: 400`を同じ要素に設定すると、どちらが優先されるかブラウザによって異なります。一方のプロパティに統一して管理することを推奨します。