TTFをWOFF2に変換
フォントをセルフホストするなら、まずここから始めましょう。WOFF2は現行のすべてのブラウザが最優先でダウンロードする形式で、お手元のTrueTypeデータを最も小さく包める形式です。このページでは、読み込み用のCSSルールも作成します。
フォント変換
またはTTF, OTF, WOFF … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
使わない文字種を削除すると、Webフォントを数百KBから30 KB未満まで小さくできる場合があります。パソコンにインストールするフォントでは、すべての文字を残してください。
フォントに含める必要がある文字列を貼り付けてください(ロゴの文字や見出しなど)。それ以外は削除されます。
ヒントは、Windowsの画面で小さな文字をくっきり見せます。削除すると、Webフォントでは10–30%小さくなることがよくあります。自動ヒントは、ヒントのないフォントに追加します。
空欄なら元の名前を保ちます。名前を変えると、元のフォントと競合せずに変換後のフォントを並べてインストールできます。
例:Regular、Bold、Italic。空欄なら元のスタイル名を保ちます。
このツールの使い方
- 1
TTFファイルをアップロード
使用するすべてのウェイトとスタイルを追加してください。1ファイル95 MBまで、最大20ファイルを処理できます。可変フォントのTTFにも対応しており、軸情報はそのまま保持されます。
- 2
CSSはオンのまま、可能ならサブセット化
@font-face CSSを含めるはあらかじめオンになっています。詳細設定の残す文字は、サイトが欧米言語の場合は「基本ラテン文字」または「ラテン文字+アクセント付き文字」に設定してください。ヒンティングを「削除」にするのもおすすめです。
- 3
WOFF2に変換
WOFF2に変換を押し、フォントと.cssファイルをダウンロードします。両方をサイトにアップロードし、スタイルシートをリンクするか、ルールを自分のCSSに貼り付けてください。
サイト用にTTFをWOFF2に変換するには?
.ttfをアップロードし、@font-face CSSを含めるをオンのままWOFF2に変換を押してください。.woff2ファイルと、それを指す@font-faceルール入りの.cssファイルが手に入ります。
WebフォントにWOFF2を使うべき理由
TTFは、アウトライン、メトリクス、カーニング、名前情報といったテーブルデータが無圧縮で入ったファイルです。2018年にW3C勧告となったWOFF2は、同じテーブルをそのまま保ちつつ、まず圧縮しやすいようにグリフのアウトラインを並べ替え、2015年にGoogleが公開した圧縮アルゴリズムBrotliで圧縮します。Googleの検証では、WOFF2は従来のWOFFより平均で約30%小さくなりました。ダウンロード後にブラウザが元のフォントデータを復元するため、文字の形は一切変わりません。
フォントは描画を妨げるため、サイズの影響はKB数以上に大きくなります。ウェブフォントが届くまで、ブラウザはテキストを隠すか代替フォントで表示し、切り替えが遅れるとレイアウトがずれることもあります。ファイルが小さいほどこの時間は短くなり、ここでは2つのオプションがさらに短縮します。残す文字はページに表示しないグリフを取り除き、ヒンティングを「削除」にすると、スマートフォンや高密度ディスプレイでは使われない命令を削ります。デスクトップ用には元のTTFを保管しておいてください。WOFF2をTTFに変換すればウェブフォントを後から展開できますが、サブセット化で除いたグリフは戻せません。
TTFとWOFF2のファイルサイズ比較
TTF(全文字セット)
100%
デスクトップにインストールする、無圧縮のフォントテーブル
WOFF2(基本ラテン文字のサブセット)
多くは10–25%
Brotli圧縮とグリフ削減の効果。フォントによって異なります
WOFF2フォント用の@font-faceルール
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF;
}WOFF2のブラウザ対応状況（バージョン別）
2014
Chrome 36
GoogleのブラウザがWOFF2をデフォルトでデコードする最初のブラウザになります。
2015
Firefox 39
MozillaがWOFF2のデコードをデフォルトで有効にします。
2016
Edge 14
MicrosoftのEdge(旧版)がWindows 10 Anniversary UpdateでWOFF2に対応します。
2018
W3C勧告
仕様が確定します。この時点でmacOSとiOSのSafariもWOFF2をデコードできます。
TTF
TrueTypeフォント
TTFは、1980年代後半に Apple が開発して1991年にリリースし、のちに Microsoft にライセンスされた TrueType フォント形式です。2次曲線で字形のアウトラインを定義し、画面上で文字をくっきり見せるヒンティング命令を含みます。すべてのデスクトップOS、ワープロソフト、デザインアプリが対応しています。OpenType にある高度な組版機能の一部はなく、Webフォント形式よりサイズも大きくなります。
- 圧縮方式
- 可逆
- 透過
- –
- アニメーション
- –
- 登場時期
- 1991 · Apple
WOFF2
Web Open Font Format 2
WOFF2 は Web Open Font Format の第 2 版で、Google の Brotli 圧縮をベースにし、2018 年に W3C 勧告として公開されました。ファイルは WOFF より約 30% 小さく、ページの表示が速くなります。最近のブラウザーはすべて WOFF2 に対応しており、ウェブフォントの推奨形式です。デスクトップ OS やデザインアプリには直接インストールできません。
- 圧縮方式
- 可逆
- 透過
- –
- アニメーション
- –
- 登場時期
- 2018 · W3C (Google)
TTFからWOFF2への変換は、デスクトップ用フォントをブラウザが好むBrotli圧縮のコンテナに収めるもので、同じグリフをより少ないバイト数で訪問者に届けられます。ウェブで見つけたフォントをインストールしたい場合は、逆方向の変換ページを使ってください。
TTFからWOFF2への変換に関するよくある質問
WOFF2のほかにTTFやWOFFのフォールバックは必要ですか？
現在の一般公開サイトでは、たいてい不要です。Chrome、Edge、Firefox、SafariはWOFF2に何年も前から対応しており、Internet Explorer 11のように非対応のブラウザのために別ファイルを用意する価値はほとんどありません。そうした訪問者がアクセス解析で確認できる場合にのみ、TTFをWOFFに変換した出力を2つ目のsrcとして追加してください。
WOFF2に変換してもフォントが100 KBを超えるのはなぜですか？
圧縮で小さくなるのはグリフの格納方法だけで、グリフの数は減りません。ラテン文字、キリル文字、ギリシャ文字、ベトナム語をカバーするフォントは、そのすべてを含んだまま配信されます。本文用フォントを数十KBまで小さくするには、実際に表示する文字だけに絞るサブセット化が有効です。
font-display: swapは何をするのですか？
ウェブフォントのダウンロード中にテキストを隠さず、まず代替フォントで表示し、届いた時点でウェブフォントに切り替えるようブラウザに指示する設定です。上の例のように@font-faceルールへ追加してください。低速な回線で遅れた切り替えを避けたい場合はoptionalも使えます。
Google FontsのTTFをWOFF2に変換してセルフホストできますか？
はい。Google FontsのフォントはSIL Open Font LicenseまたはApache Licenseで公開されており、どちらも変換とセルフホスティングが認められています。自分でファイルを配信すれば、外部サーバーへのリクエストも減らせます。
WOFF2はメールマガジンでも使えますか？
一部のメールクライアントでのみ有効です。Apple MailとiOSのメールは@font-face経由でウェブフォントを読み込みますが、GmailやほとんどのバージョンのOutlookは無視して代替フォントで表示します。メールのフォント指定には、必ず安全なシステムフォントも並べてください。