TTF を WOFF2 に変換 – TTF・OTF からウェブフォントを作成

FileReshape の TTF から WOFF2 への変換ツールは、Google Fonts と同じ圧縮方式である Google の woff2 ライブラリを使い、TrueType や OpenType のフォントを WOFF2 ウェブフォントにします。処理はブラウザー内で行われ、フォントはアップロードされません。フォントの変更やサブセット化は行わないので、すべての文字が残ります。変換してもフォントのライセンスで許される範囲は変わりません。

うまく変換できないファイルがありましたか? [email protected] までメールでお知らせください。小さなサンプルファイルを添えていただけると、修正しやすくなります。

要点

フォントを WOFF2 に変換する理由

ウェブサイトのフォントは WOFF2 で配信するのが基本です。この形式は、通常の TrueType や OpenType のフォントを Brotli 圧縮とグリフデータ専用の符号化で包むもので、ファイルはたいてい TTF より 50〜70 % 小さくなり、ページの文字が早く表示されます。このツールは、Google がこの形式のために作った woff2 ライブラリをブラウザーで動くようにしたものを使い、.ttf と .otf のファイルを .woff2 に変換します。レギュラー、ボールド、イタリックなどファミリー全体を一度にドロップすれば、それぞれの .woff2 が入った ZIP が1つできます。変換は可逆です。すべてのグリフ、カーニング、合字、ヒンティング、名前がそのまま残り、WOFF2 から元のフォントに戻すこともできます。ライセンス契約のあるフォントもお使いのパソコンから出ることがないので、フォントファイルを第三者に送ることがライセンスで禁止されている場合にも安心です。

TTF を WOFF2 に変換する方法

  1. .ttf または .otf のファイルを1つ以上ボックスにドロップするか、クリックして選択します。
  2. 一覧でフォント名とグリフ数を確認します。
  3. 「WOFF2 に変換」をクリックします。フォントが1つなら .woff2 ファイルとして、複数なら ZIP としてダウンロードされます。

ウェブフォントで知っておきたいポイント

ウェブで使えるライセンスか確認する

フォントを変換しても、ライセンスは変わりません。市販のフォントの多くはデスクトップでの使用に限られ、ウェブで使うには別のウェブライセンスが必要です。Google Fonts の大半や GitHub 上の多くのフォントのように SIL Open Font License のフォントは、変換してどのウェブサイトでも使えます。フォント内のライセンスフラグが埋め込みを禁止している場合も変換はしますが、そのことをお知らせします。

CSS で WOFF2 を使う

.woff2 をスタイルシートと同じ場所にアップロードし、@font-face で宣言します。たとえば src に url("myfont.woff2") format("woff2") を指定し、ファミリーの各ファイルに合わせて font-weight と font-style を設定します。現在のブラウザーはすべて WOFF2 を読めるので、WOFF のフォールバックが必要なのはごく古いブラウザーの場合だけです。

サブセット化は行わない

このツールはフォントのすべての文字を残します。不要なキリル文字、ギリシャ文字、ベトナム語の文字を含むフォントは、必要以上に大きいままになります。文字を削ってファイルを小さくするサブセット化には、pyftsubset やフォントエディターなどが必要です。ここでの変換で文字が失われることはありません。

フォントコレクション

.ttc ファイルは1つのファイルに複数のフォントが入っていて、ここでは変換できません。コレクションの WOFF2 はそもそもブラウザーでほとんどサポートされていないので、先にフォントエディターで個々のフォントを取り出してください。

ファイル形式について

TrueType フォント

TrueType(.ttf)は、Apple と Microsoft が 1991 年に導入したフォント形式です。グリフは2次曲線で描かれ、画面上の小さな文字をくっきり見せるための詳細なヒンティング命令も含められます。 あらゆるオペレーティングシステム、オフィスソフト、デザインソフトが TTF フォントをインストールして使えます。

  • Windows、macOS、Linux、Android、iOS に、追加のソフトなしでインストールできます。
  • OpenType(1996 年)以降、.ttf ファイルにも .otf と同じ OpenType 機能(合字、カーニング、スモールキャップ)を含められます。
  • ウェブフォントと違って TTF は圧縮されていないため、たいてい WOFF2 版の2~3倍の大きさになります。

WOFF2 ウェブフォント

WOFF2(Web Open Font Format 2.0)は、ウェブサイト向けに作られた、TrueType や OpenType フォントの圧縮パッケージです。2018 年に W3C 勧告となり、Brotli 圧縮とグリフデータの特殊なエンコードを使うことで、WOFF 1.0 より約 30 % 小さくなります。 現在のすべてのブラウザーが対応しています。

  • CSS では @font-face と src: url(font.woff2) format('woff2') の形で使います。
  • オペレーティングシステムには WOFF2 ファイルをインストールできません。先に TTF か OTF に変換してください。
  • 中のフォントは変更されないため、WOFF2 を元の TTF や OTF に戻せます。

よくある質問

フォントはアップロードされますか?

いいえ。フォントはお使いの端末上でブラウザーが読み込んで圧縮し、サーバーには何も送信されません。

フォントはどのくらい小さくなりますか?

たいてい TTF より 50〜70 %、WOFF 1.0 より約 30 % 小さくなります。実際の削減量はフォントによって異なり、結果には変換前後のサイズが表示されます。

WOFF2 にするとフォントの見た目は変わりますか?

いいえ。WOFF2 は劣化のない圧縮です。ブラウザーはまったく同じアウトライン、字間、ヒンティングのフォントを展開します。

OTF フォントも変換できますか?

はい。PostScript(CFF)アウトラインの OpenType フォントはそのまま WOFF2 に格納され、ブラウザーは TrueType フォントと同じように読み込みます。