TTFをWOFFに変換
WOFFは主要ブラウザすべてが初めて対応したWebフォント形式で、WOFF2が対応していない環境でも今なお読み込めます。プラットフォームやテーマ、リーダーが.woffを指定している場合は、ここでTTFを変換してください。
フォント変換
またはTTF, OTF, WOFF … ファイルをここにドロップ ·
1ファイルあたり最大95 MB· 最大20ファイルまで· 30分後に削除
ファイルは当社のサーバーで処理され、30分後に削除されます。
使わない文字種を削除すると、Webフォントを数百KBから30 KB未満まで小さくできる場合があります。パソコンにインストールするフォントでは、すべての文字を残してください。
フォントに含める必要がある文字列を貼り付けてください(ロゴの文字や見出しなど)。それ以外は削除されます。
ヒントは、Windowsの画面で小さな文字をくっきり見せます。削除すると、Webフォントでは10–30%小さくなることがよくあります。自動ヒントは、ヒントのないフォントに追加します。
空欄なら元の名前を保ちます。名前を変えると、元のフォントと競合せずに変換後のフォントを並べてインストールできます。
例:Regular、Bold、Italic。空欄なら元のスタイル名を保ちます。
このツールの使い方
- 1
TTFフォントを選択
Webで使いたいTrueTypeフォントをアップロードします。1回に最大20ファイル、1ファイルあたり95 MBまで対応しています。
- 2
出力形式がWOFFか確認
変換先はWOFFに設定されています。詳細設定の@font-face CSSを含めるにチェックを入れると、そのまま使えるルールが付きます。1つの文字体系だけのサイトで使うフォントなら、残す文字でサブセットを選んでください。
- 3
WOFFに変換
WOFFに変換を押し、.woffファイルをダウンロードして、スタイルシートの隣かテーマのフォントフォルダにアップロードします。
TTFからWOFFへの変換で、グリフは1つも変わりません。各フォントテーブルをzlibで圧縮して小さなヘッダーを付け、Internet Explorer 9以降のブラウザが@font-faceで読み込めるファイルにします。
TTFからWOFFへの変換が今も必要な人
WOFFは2009年に、MozillaのJonathan Kewが、書体デザイナーのTal Lemingおよびエリック・ファン・ブロクランドと共に提案しました。2010年のFirefox 3.6で最初に実装され、2012年12月にW3C勧告となりました。目的は実用的で、デスクトップ用フォントをそのままサーバーに置くのではない形式をフォントメーカーに提供し、ブラウザが共通で扱える形式を1つ用意することでした。数年のうちにChrome、Safari、Internet Explorer 9がすべて対応しました。
現在はWOFF2がより少ないバイト数で同じ役割を果たすため、WOFFは主にフォールバックや古い環境の要件として残っています。WordPressのテーマやページビルダー、ECテンプレートには、今も.woffを求めるフォントのアップロード欄があります。Internet Explorer 11を使う社内イントラネットでは、WOFF2はまったく読めません。電子書籍制作も同様で、EPUB 3はWOFFを受け付けますが、リーダーアプリのWOFF2対応は新しく、対応状況にもばらつきがあります。
IE 9–11WOFFは読めてもWOFF2は読めないブラウザ
WOFF2と併せてWOFFのフォールバックを用意すべき？
WOFFを追加する理由
- Internet Explorer 9〜11や、WOFF2登場前のブラウザに対応できます
- .woffのみを受け付けるテーマやプラグインのアップロード欄でも使えます
- 最新ブラウザの訪問者はWOFF2を先に取得するため、負担は増えません
追加しない理由
- 同じフォントのWOFF2より約30%大きくなります
- ウェイトごとにアップロードやバージョン管理、キャッシュ更新が必要なファイルが1つ増えます
- 一般公開サイトでは、古いブラウザの訪問者が少なすぎて影響がほとんどありません
WOFFファイルを@font-faceに追加する
両方のファイルを1つのsrc宣言に並べます。先にformat("woff2")付きの.woff2、次にformat("woff")付きの.woffを書きます。format指定があると、ブラウザは使えないファイルをダウンロードせずに読み飛ばせます。デスクトップアプリやデザインのモックアップでも使うなら、元のTTFは残しておいてください。後からWOFFをTTFに変換して戻すこともできますが、それに頼る理由はありません。
変換を押す前に、確認しておきたいオプションが2つあります。残す文字は、サイトで使う文字体系だけにフォントを絞ります。ファイルサイズへの効果は、WOFFとWOFF2の選択よりも大きくなります。ヒンティングは、Internet Explorer向けのフォールバックなら「保持」のままで構いません。その利用者はWindows画面で見ている可能性が最も高く、TrueTypeの命令が小さな文字を今でも鮮明にしてくれるためです。
TTF
TrueTypeフォント
TTFは、1980年代後半に Apple が開発して1991年にリリースし、のちに Microsoft にライセンスされた TrueType フォント形式です。2次曲線で字形のアウトラインを定義し、画面上で文字をくっきり見せるヒンティング命令を含みます。すべてのデスクトップOS、ワープロソフト、デザインアプリが対応しています。OpenType にある高度な組版機能の一部はなく、Webフォント形式よりサイズも大きくなります。
- 圧縮方式
- 可逆
- 透過
- –
- アニメーション
- –
- 登場時期
- 1991 · Apple
WOFF
Web Open Font Format
WOFF は、Mozilla、Opera、Microsoft が作成したウェブフォント形式で、2012 年に W3C 勧告として公開されました。TrueType または OpenType のフォントデータを圧縮し、メタデータを付けて、ダウンロードを速くします。すべてのブラウザーが WOFF に対応していますが、圧縮率の高い WOFF2 に主役を譲っています。デスクトップ OS には WOFF フォントを直接インストールできません。
- 圧縮方式
- 可逆
- 透過
- –
- アニメーション
- –
- 登場時期
- 2012 · W3C (Mozilla, Opera, Microsoft)
TTFからWOFFへの変換は、デスクトップ用フォントを最初のWebフォント形式にまとめて圧縮します。古いブラウザや電子書籍リーダー、WOFF2ではなく.woffを求めるテーマで必要になります。
TTFをWOFFに変換に関するよくある質問
WOFFは最新のブラウザでも使えますか？
はい。現行のブラウザはすべてWOFF2に加えてWOFFも読み込めます。WOFF 1.0のサポートが外されたことはありません。ただし、ルールに両方が書かれている場合は、サイズの小さいWOFF2が優先されます。
TTFとWOFFではどちらが小さいですか？
基本的にはWOFFです。同じテーブルをZIPファイルでも使われるzlibで圧縮して格納するため、一般的なテキスト用フォントはかなり小さくなります。WOFF2はBrotliでさらに小さくなるので、新規サイトではTTFをWOFF2に変換が第一候補です。
EPUBでWOFFフォントは使えますか？
はい。EPUB 3はTrueTypeやOpenTypeと並んでWOFFをコアフォント形式に挙げており、EPUB 3.2では2019年にWOFF2が追加されました。古い電子書籍リーダーはこの3つしか扱えないことがあるため、書籍ならWOFFかTTFが無難です。
srcリストではWOFFとWOFF2をどの順に書くべきですか？
WOFF2を先に、次にWOFFを書きます。ブラウザは一覧を順にたどり、対応している最初の形式をダウンロードします。最新のブラウザはWOFF2を取得し、古いブラウザだけがWOFFの行に進みます。
WOFFに変換してもフォントのライセンス情報は残りますか？
フォント内のnameテーブルは、そのままコピーされます。通常は著作権表示とライセンスURLが入っています。WOFFにはライセンス情報用の任意のメタデータブロックもあり、一部のフォントメーカーは自社のWOFF版に記入しています。