---
title: "Webフォントとは？woff2と表示の仕組み"
description: "読み込み時に文字がちらつく・しばらく表示されないFOUT/FOITに悩むウェブ制作者向けに、Webフォントの仕組みとwoff2の特徴を解説。表示速度とデザイン品質のバランスを取るための判断材料が得られます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/what-is-webfont"
markdown: "https://giga-site.com/articles/what-is-webfont/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# Webフォントとは？woff2と表示の仕組み

サイトを開いた瞬間、文字が一瞬別のフォントで表示されたり、しばらく文字が出てこなかったりする。これはWebフォントの読み込みに伴う現象です。本記事ではWebフォントとは何か、woff2の特徴やFOUT/FOITが起きる仕組みをやさしく解説します。

> Source HTML: https://giga-site.com/articles/what-is-webfont
> Article index: https://giga-site.com/articles/index.md

## Webフォントとは

Webフォントとは、利用者の端末に入っているフォントに頼らず、Webページ側でフォントファイルを配信して使う仕組みです。これにより、見る人の環境に関わらず、制作者が意図したデザインの書体でページを表示できます。

従来は、端末に入っている標準的なフォントの範囲でしかデザインできませんでした。Webフォントを使えば、ブランドに合った書体や特徴的な見出し用の書体などを、どの端末でも同じように見せられます。

Webフォントは、CSSでフォントファイルの場所と名前を定義し、要素にそのフォントを指定して使います。フォントファイルはページ表示時にダウンロードされるため、読み込みの仕方が表示の体感に影響します。

## woff2とは

woff2は、Webフォント向けに作られたフォントファイルの形式の一つで、現在広く使われています。最大の特徴は圧縮率の高さで、同じフォントでもファイルサイズを小さく抑えられるため、ダウンロードが速く済みます。

ファイルが軽いほど、フォントが届くまでの待ち時間が短くなり、後述する表示のちらつきや遅延も抑えやすくなります。そのため、Webフォントを配信するときはwoff2を主に使うのが一般的です。

## 実務ではどこで関係する？

Webフォントは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

Webフォントについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## FOUTとFOITの仕組み

Webフォントはダウンロードに時間がかかるため、フォントが届くまでの間、ブラウザはテキストの見せ方を選ばなければなりません。この選び方の違いから、FOUTとFOITという二つの現象が生まれます。

- FOUT: まず代替フォントで文字を表示し、Webフォントが届いたら差し替わる。文字は早く読めるが、書体が一瞬入れ替わる
- FOIT: Webフォントが届くまで文字を表示しない。ちらつきはないが、その間は文字が見えず空白になる
- どちらが起きるかは、CSSのフォント表示の指定やブラウザの挙動によって変わる
- font-display という指定で、待つか先に代替を出すかの方針を選べる

## Webフォントの表示を整える手順

ちらつきや遅延を抑えるには、フォントの軽量化と表示方針の指定が鍵になります。次の手順で見直しましょう。

1. 配信するフォントをwoff2形式で用意し、ファイルを軽くする
2. 必要な文字や太さだけに絞り、読み込むフォントの量を減らす
3. CSSのフォント定義で font-display を指定し、表示方針を決める
4. 代替フォントを指定し、Webフォントが届く前でも読める状態にする
5. ブラウザで開き、読み込み時のちらつきや遅延が許容範囲か確認する

## 共有環境でフォント表示を確かめる

Webフォントの見え方は、回線の速さや初回読み込みかどうかで変わります。自分の環境では速くても、相手の環境ではちらつきが目立つことがあるため、共有URLで実際に確かめると安心です。

ギガサイト便はCSSやフォントファイルを含むZIPをそのまま共有URLにでき、CDNのエッジ配信で表示が速いのが特徴です。相手にURLを渡してフォントの読み込みやちらつきの見え方を確認してもらう、というレビュー用途に向いています。

## よくある質問

### woff2と他の形式の違いは何ですか

woff2はWeb向けに最適化され、圧縮率が高くファイルが軽いのが特徴です。軽いほどダウンロードが速く、表示の遅延やちらつきを抑えやすいため、現在のWebフォント配信ではwoff2が主に使われます。

### FOUTとFOITはどちらが良いのですか

一概には言えません。FOUTは文字を早く読める反面、書体が入れ替わります。FOITはちらつきがない反面、フォントが届くまで文字が見えません。用途に応じてfont-displayで方針を選びます。

### ちらつきを減らすにはどうすればよいですか

フォントをwoff2で軽量化し、必要な文字や太さに絞って読み込み量を減らすのが基本です。あわせてfont-displayの指定と、見やすい代替フォントの指定でちらつきを和らげられます。

### Webフォントは必ず使うべきですか

必須ではありません。デザイン上の意図が重要な場面では有効ですが、読み込みの負担も伴います。標準的なフォントで十分なら無理に使わず、必要な箇所に絞って使うのが現実的です。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [font-display: swapとは？Webフォント表示中の文字の出し方](https://giga-site.com/articles/what-is-font-display-swap/index.md)
- [DNSとは？ドメインとサーバーをつなぐ仕組みをやさしく解説](https://giga-site.com/articles/what-is-dns/index.md)
- [ドメインとは？URLの住所をやさしく解説](https://giga-site.com/articles/what-is-domain/index.md)
- [URLの構造とは？スキーム・ホスト・パスの意味を解説](https://giga-site.com/articles/what-is-url-structure/index.md)
- [HTTPステータスコードとは？主要な番号の意味](https://giga-site.com/articles/what-is-http-status-code/index.md)
- [404エラーとは？ページが見つからない原因と仕組み](https://giga-site.com/articles/what-is-404/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Webフォントとは？woff2と表示の仕組み",
  "description": "読み込み時に文字がちらつく・しばらく表示されないFOUT/FOITに悩むウェブ制作者向けに、Webフォントの仕組みとwoff2の特徴を解説。表示速度とデザイン品質のバランスを取るための判断材料が得られます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/what-is-webfont",
  "url": "https://giga-site.com/articles/what-is-webfont",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "woff2と他の形式の違いは何ですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "woff2はWeb向けに最適化され、圧縮率が高くファイルが軽いのが特徴です。軽いほどダウンロードが速く、表示の遅延やちらつきを抑えやすいため、現在のWebフォント配信ではwoff2が主に使われます。"
      }
    },
    {
      "@type": "Question",
      "name": "FOUTとFOITはどちらが良いのですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "一概には言えません。FOUTは文字を早く読める反面、書体が入れ替わります。FOITはちらつきがない反面、フォントが届くまで文字が見えません。用途に応じてfont-displayで方針を選びます。"
      }
    },
    {
      "@type": "Question",
      "name": "ちらつきを減らすにはどうすればよいですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "フォントをwoff2で軽量化し、必要な文字や太さに絞って読み込み量を減らすのが基本です。あわせてfont-displayの指定と、見やすい代替フォントの指定でちらつきを和らげられます。"
      }
    },
    {
      "@type": "Question",
      "name": "Webフォントは必ず使うべきですか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必須ではありません。デザイン上の意図が重要な場面では有効ですが、読み込みの負担も伴います。標準的なフォントで十分なら無理に使わず、必要な箇所に絞って使うのが現実的です。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```