woff2とは？初心者でもわかるWebフォントの圧縮技術と使い方ガイド共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

はじめに

ウェブサイトを表示する時、文字を表示するためのフォントが必要です。フォントファイルはサイズが大きいとページの表示が遅くなります。そこで登場したのが woff2 です。ここでは「woff2とは何か」「どう使うのか」を中学生にも分かるように解説します。

woff2とは何か

WOFF2 は Web Open Font Format 2 の略で、フォントファイルを効率よく圧縮して通信量を減らすための形式です。元のフォントをそのまま使うよりも、ファイルサイズをかなり小さくできます。圧縮されることで、読み込みが速くなり、サイトの体感速度が上がります。

この形式はブラウザのサポートが広く、モバイル端末でも適用されやすい点が特徴です。

仕組みと利点

従来の TTF/OTF 形式をそのまま使うと、フォントデータは大きくなります。WOFF2 はこのデータを最適化して圧縮します。その結果、同じフォントを使っても 通信量が減り、ページの表示が速くなります。

実際の使い方

使い方の基本は CSS の @font-face を使い、フォントファイルを指示することです。以下は簡単な例です。

@font-face { font-family: 'MyFont'; src: url('/fonts/MyFont.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }

その後、文字要素にフォントを適用します。

p { font-family: 'MyFont', Arial, sans-serif; }

注意点

フォントのライセンスに気をつけてください。商用サイトでも font-face で使える font かどうかを確認します。

また、古いブラウザの一部では woff2 が使えない場合があります。その時はフォールバックとして woff か TTF を用意します。

互換性と制約

現代の多くのブラウザは woff2 をサポートしていますが、一部の古いスマートフォンやブラウザでは未対応です。複数のフォーマットを用意することで、訪問者全員に対応できます。

比較表

<th>形式

特徴	主な効果
WOFF	圧縮あり	ファイルサイズは小さいが WOFF2 に劣る
WOFF2	より高い圧縮率	通信量がさらに減少、表示が速い
TTF/OTF	元のフォント形式	サポートは広いがサイズが大きい

パフォーマンスの目安

woff2 を使うことで、フォントデータの合計サイズを従来のファイルよりもおおよそ 20〜50% ほど削減できる場合があります。これはサイト全体の読み込み時間短縮に直結します。実測値はフォントの種類とサイトの構成次第ですが、体感速度の向上は多くのケースで実感できます。

まとめ

woff2 は Web フォントの未来を支える重要な技術です。小さなファイルで大きな効果を実感できます。適切なフォントサーバー設定やフォールバック戦略を取り入れて、快適なウェブ体験を作りましょう。

woff2の同意語

WOFF2: Web Open Font Format 2 の略称。Web上で使われるフォントを圧縮して配信する第2世代のフォーマットのこと。
Web Open Font Format 2: WOFF2 の正式名称。Web Open Font Format の第2世代にあたるフォーマット。
Web Open Font Format 2.0: WOFF2 のバージョン表記。仕様上の第2世代を指す正式名。
WOFF 2: WOFF2 の別表記。スペースを入れた表現。
WOFF 2.0: WOFF2 の別表記。2.0 のバージョンを明示した表現。
Web Open Font Format Version 2: WOFF2 の英語表記の別名。Version 2 の表現。
WOFF2 (Web Open Font Format 2): 略称と正式名称を併記した表現。

woff2の対義語・反対語

非圧縮フォント: WOFF2は高い圧縮を施したウェブフォント形式です。非圧縮フォントはファイルサイズが大きくなる傾向があり、読み込み速度の点で不利になることがありますが、アーカイブや編集時には扱いやすい場合があります。
TTF/OTFフォント: 伝統的なフォント形式。ウェブ用圧縮のWOFF2とは異なり、ウェブ配布に最適化されていないことが多く、ウェブでの高速読み込みには不向きです。
WOFF1: WOFF2の前身の規格。最新ではありませんが、互換性の観点で使われることもあります。圧縮やパフォーマンスの観点ではWOFF2より劣ることが多いです。
ローカルフォント: デバイスに直接インストールされているフォント。ウェブ上から読み込ませるウェブフォントとは別の経路で提供され、@font-faceでの配布には通常使われません。
ウェブフォント以外のフォント: ウェブ配布を前提としないフォント全般。Webサイトのフォント指定とは別の文脈で使われます。
ビットマップフォント: ピクセル単位で描画されるフォント。拡大縮小時に劣化することが多く、WOFF2のベクタフォントとは性質が異なります。
デスクトップ用フォント: OSやアプリで利用されるフォント。ウェブのフォント・圧縮仕様とは独立して動作します。
大容量フォント: ファイルサイズが特に大きいフォント。WOFF2の利点である高圧縮とは反対の性質を持つことが多いです。

woff2の共起語

woff2: Web Open Font Format 2の略。ウェブ上へフォントを配信する際の圧縮フォーマットで、従来のWOFFより高い圧縮率と高速な読み込みを実現します。
ウェブフォント: ウェブサイトで使うフォントの総称。woff2はこのウェブフォント形式の一つです。
WOFF: Web Open Font Formatの旧形式。woff2の前身で、Zlib圧縮を用いてフォントデータを圧縮します。
OpenTypeフォント: OpenTypeは広く使われるフォント形式。woff2はこの形式のアウトラインを圧縮して配信します。
TrueTypeフォント: TrueTypeは別のフォント形式。woff2のバックエンドとなるアウトラインを含むことがあります。
OTF: OpenTypeフォントの略称。OpenTypeのフォーマットのひとつです。
TTF: TrueTypeフォントの略称。TrueType形式を指します。
@font-face: CSSのルールで、ウェブページにフォントを読み込ませる宣言です。woff2を使う際によく使われます。
font-display: CSSのfont-displayプロパティ。読み込み時のフォント表示の挙動を指定します（swapなど）。
unicode-range: フォント内で使用する文字の範囲を指定する指示子。サブセット作成時に重要です。
サブセット: フォントの文字集合を絞ってファイルサイズを小さくする最適化手法です。
Brotli圧縮: Brotliは高い圧縮率を実現する圧縮アルゴリズム。woff2の主な圧縮方式です。
zlib圧縮: 従来の圧縮方式。WOFFなどで使われることが多いです。
フォントファイル: 実際のフォントデータが格納されたファイル。woff2はこのファイルを圧縮して配信します。
CDN: フォントファイルをCDN経由で配信することで読み込みが速くなる可能性が高まります。
ブラウザ互換性: woff2をサポートするブラウザとそうでないブラウザがあるため、互換性の確認が重要です。
ファイルサイズ: フォントファイルのデータ量。woff2はファイルサイズを小さくすることでダウンロードを軽くします。
読み込み速度: フォントのダウンロードと適用にかかる時間。woff2は高速化に寄与します。
フォールバック: フォント読み込みが遅い場合や失敗した場合に代替フォントを表示します。
font-family: CSSで指定するフォント名。@font-faceで定義した名前を使って適用します。
src: url: @font-faceでフォントファイルの場所を指定するURLです。
パフォーマンス: ウェブサイトの表示速度や体感速度全般を指します。フォント最適化はパフォーマンス改善の一部です。