フォント変換：TTF・OTF・WOFF・WOFF2・EOT

TTF・OTF・WOFF・WOFF2・EOT：それぞれの用途

TTF（TrueType）とOTF（OpenType）は、パソコンにインストールして使うフォントの形式です。Windows、macOS、Linuxのどれでも使え、Word、Photoshop、Canva、カッティングマシン（Cricut、シルエットカメオ）のソフトでも利用できます。WOFFとWOFF2は同じフォントをWeb用に圧縮したもので、WOFF2はWOFFより約30%軽く、現在のすべてのブラウザが対応しているため、サイトの表示が速くなります。EOTはInternet Explorer 6〜8向けの古い形式で、非常に古いサイトでのみ必要です。TTCファイルは同じファミリーの複数のフォントをまとめたもので、ツールが個別に分けてそれぞれ変換します。日本語フォントはファイルが大きくなりがちなので、Webでは特にWOFF2がおすすめです。

OTFをTTFに（TTFをOTFに）変換する

OTFフォントには、TrueTypeとPostScript（CFF）の2種類のアウトラインがあります。PostScriptアウトラインのOTFをTTFに変換すると、ツールが各文字をTrueTypeの曲線に置き換え、カーニング、合字、異体字、フォント名などほかの情報はそのまま保ちます。引き継がれないのは、古い画面で小さな文字をきれいに見せるためのヒンティングだけです。逆にTTFからは、TrueTypeアウトラインのままの.otfファイルができます。どこにでもインストールできる正規のOpenTypeで、品質は一切落ちません。

@font-faceでサイトにフォントを使う

Webサイトで独自のフォントを表示するには、WOFF2形式（古いブラウザ向けにはWOFFも）でアップロードし、CSSの@font-faceルールで宣言します。ツールのWebキットがすべて用意します。各フォントのファイル、ファミリー名、ウェイト（標準は400、太字は700）、スタイル、読み込み中に文字が見えなくなるのを防ぐfont-display: swapを含むfonts.css、そしてデモページです。ファイルをサイトにコピーしてfonts.cssを各ページで読み込み、表示された名前でfont-familyを指定するだけ。WordPressなら、同じルールをテーマの追加CSSに貼り付けます。

フォントのライセンスで確認すべきこと

フォントを変換してもライセンスは変わりません。Google Fontsなどのフリーフォント（OFLライセンス）は、変換してサイトで自由に使えます。Noto Sans JPなど日本語のフリーフォントにもOFLのものが多くあります。一方、市販フォントはデスクトップ用とWeb用でライセンスが分かれていることがよくあります。ツールはファイルに記録された著作権とライセンス情報を表示し、文書やサイトへの埋め込みが禁止されているフォントには警告を出します。変換したフォントをネットで公開する前に、使用権を確認してください。