---
title: "Variable Fontとは？HTML共有・AI生成サイトでの意味をやさしく解説"
description: "1ファイルで多様なウェイトとスタイルを表現できるVariable Fontの仕組みを解説。AI生成HTMLを外部に共有する際のファイル管理・ブラウザ対応・見た目崩れの防止策を非エンジニアにもわかりやすく説明します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-variable-font-html-share"
markdown: "https://giga-site.com/articles/what-is-variable-font-html-share/index.md"
category: "用語解説"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Variable Fontとは？HTML共有・AI生成サイトでの意味をやさしく解説

「太さや字幅を細かく変えたデザインをHTMLで共有したら、フォントが崩れて届いた」という経験はありますか。Variable Fontはひとつのフォントファイルで太さ・幅・斜体などを連続的に変化させる仕組みで、AI生成サイトでも活用されています。共有時に知っておくべき動作とファイル管理のポイントを整理します。

> Source HTML: https://giga-site.com/articles/what-is-variable-font-html-share
> Article index: https://giga-site.com/articles/index.md

## ひとことで言うと

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`を同じ要素に設定すると、どちらが優先されるかブラウザによって異なります。一方のプロパティに統一して管理することを推奨します。

## よくある質問

### Variable Fontを使ったHTMLを共有したら、相手のPCではフォントが別のものに見えました。原因は何ですか？

フォントファイルへのパスがHTMLから切れているか、相手のブラウザがVariable Fontに対応していない可能性があります。フォントURLが相対パスであればHTMLと同じ階層にファイルが存在するかを確認し、絶対URLであればアクセス可能かブラウザで直接開いて確認してください。

### AI生成HTMLのGoogleフォントURLにVariable Font形式の記述があります。別途woff2ファイルを用意する必要はありますか？

Googleフォントのcdn経由で読み込む場合はファイルを別途用意する必要はありません。ただしオフライン環境や閉鎖ネットワーク内で共有する場合は、事前にwoff2ファイルをダウンロードしてHTMLと同梱する必要があります。

### font-weight: 500のように書いてもVariable Fontの細かい太さ調整はできますか？

現代ブラウザではfont-weightに100〜900の整数値を指定するだけでVariable Fontの軸が動作します。font-variation-settingsを直接使うと小数点値（例：450.5）も指定できますが、通常の共有用途では100刻みのfont-weightで十分です。

## 関連記事

- [font-displayとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-font-display-html-share/index.md)
- [SRI（Subresource Integrity）とは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sri-html-share/index.md)
- [Referrer-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-referrer-policy-html-share/index.md)
- [Permissions-Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-permissions-policy-html-share/index.md)
- [Same-Origin Policyとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-same-origin-policy-html-share/index.md)
- [sandbox付きiframeとは？HTML共有・AI生成サイトでの意味をやさしく解説](https://giga-site.com/articles/what-is-sandbox-iframe-html-share/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Variable Fontとは？HTML共有・AI生成サイトでの意味をやさしく解説",
  "description": "1ファイルで多様なウェイトとスタイルを表現できるVariable Fontの仕組みを解説。AI生成HTMLを外部に共有する際のファイル管理・ブラウザ対応・見た目崩れの防止策を非エンジニアにもわかりやすく説明します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-variable-font-html-share",
  "url": "https://giga-site.com/articles/what-is-variable-font-html-share",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "Variable Fontを使ったHTMLを共有したら、相手のPCではフォントが別のものに見えました。原因は何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォントファイルへのパスがHTMLから切れているか、相手のブラウザがVariable Fontに対応していない可能性があります。フォントURLが相対パスであればHTMLと同じ階層にファイルが存在するかを確認し、絶対URLであればアクセス可能かブラウザで直接開いて確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "AI生成HTMLのGoogleフォントURLにVariable Font形式の記述があります。別途woff2ファイルを用意する必要はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Googleフォントのcdn経由で読み込む場合はファイルを別途用意する必要はありません。ただしオフライン環境や閉鎖ネットワーク内で共有する場合は、事前にwoff2ファイルをダウンロードしてHTMLと同梱する必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "font-weight: 500のように書いてもVariable Fontの細かい太さ調整はできますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "現代ブラウザではfont-weightに100〜900の整数値を指定するだけでVariable Fontの軸が動作します。font-variation-settingsを直接使うと小数点値（例：450.5）も指定できますが、通常の共有用途では100刻みのfont-weightで十分です。"
      }
    }
  ]
}
```