WebフォントWOFF、WOFF2形式に変換できるフリーソフト

更新：2018-01-31

WebフォントWOFF、WOFF2形式に簡単に変換できるフリーソフト武蔵システムの「WOFFコンバータ」。

WOFF、WOFF2形式に変換する

Webフォントで使うファイルフォーマットはいくつかあるが、代表的なものにWOFFとWOFF2がある。武蔵システムの「WOFFコンバータ」というフリーソフトを使うと簡単にWOFF/WOFF2形式のファイルが作れる。無償の代わりにソフト上に広告が表示される。

手順は以下の通り。

https://opentype.jp/woffconv.htm からWOFFコンバータをダウンロードし、インストールする。 Windows版とMac版があり、ここではWindows版を使って説明する。
WOFFコンバータを起動し、変換前のファイルを指定するが、起動後のウィンドウにフォントファイルをドロップするだけで良い。 TrueType（.ttf）、OpenType（.otf）、外字ファイル（.tte、.ote）を変換できる。
変換後のファイル名の指定は任意で、その他の設定も任意なので、このまま［変換開始］で変換できる。 EOTファイルも作成したい場合は「EOTファイルを作成する」をチェックする。

作業はこれだけで、あとは変換されるのを待つだけ。 WOFF2の変換は時間がかかり、Core i5-4670（3.4GHz、4コア4スレッド）のマシンで約6MBあるIPAexゴシックを変換すると約50秒かかった。

フォントを用意する

ライセンス上、Webフォントとして使えるフォントを用意する。代表的なフォントとしてはIPAフォントがあるが、収録語数が多く、1書体につきファイルサイズが6～7MBあり、WOFF2 に変換しても3～4MBになる。基本的に WOFF より WOFF2 の方が圧縮率が高くファイルサイズが小さい。

ファイルサイズが大きくなる場合は、同じく武蔵システムの「サブセットフォントメーカー」 https://opentype.jp/subsetfontmk.htm を使い、必要な文字だけ指定してフォントファイルを作れる。ただ、必要な文字のリストを用意するのが面倒である。

そういうときは、梅フォントやはんなり明朝など少しファイルサイズが小さいものを使うと良い。それでもWOFF2が1～2MB程度になるが、このくらいが許される範囲だろうか。当然ファイルサイズが大きいとフォントのダウンロードに時間がかかり、サイトが表示されるまで時間がかかる。一度表示されたらキャッシュされるので表示は速い。また、縦書きする場合はきちんと表示されないフォントもあるので、事前に試用した方が良い。

サブセットフォントメーカーは、例えばアルファベットや平仮名・片仮名だけを抜き出し、CAPTCHA（画像認証）用のフォントを用意したい場合などに便利である。

CSS、Webフォント

Webフォントのファイル形式としては WOFF、WOFF2 の他に EOT、TTF、OTF、SVG もあるが、最新版のブラウザのみ対象とするなら WOFF/WOFF2 だけで良い。 Mozilla Developer Networkによると、WOFF は Chrome 6、Firefox 3.5、IE 9、Opera 11.10、Safari 5.1 以上、WOFF2 は Chrome 36、Firefox 39、Opera 24 以上で使える。

また、Edge 38.14393.0.0 と iOS の Safari 10 を試したところ WOFF2 が使えた。以下は梅明朝（ume-tmo3.ttf）を変換した ume-tmo3.woff と ume-tmo3.woff2 を使った例。

<style>
@font-face{ 
    font-family: 'testfont';
    font-style: normal;
    font-weight: normal;
    src: url('./ume-tmo3.woff2') format('woff2'),
        url('./ume-tmo3.woff') format('woff');
}

.ftest {
    font-family: "testfont", serif;
}
</style>

<span class="ftest">
日本語・明朝体Webフォントを表示する。
</span>

ここでは testfont という適当な名前を付けている。フォントファイルは同じディレクトリに置いている。現在、明朝体がない Android でも Chrome で明朝体を表示できるようになる。その他、iOS の Safari、Windows の Chrome、Firefox、IE、Edge など最新版のブラウザで表示を確認した。 Mac は手放したので分からないが、iOS とほぼ同じだろう。

WebフォントWOFF、WOFF2形式に変換できるフリーソフト

WOFF、WOFF2形式に変換する

フォントを用意する

CSS、Webフォント

カテゴリ