フォントを Base64 に変換

フォントを Base64 に変換する方法

1. .woff2、.woff、.ttf、.otf ファイルを枠にドロップするか、ファイル選択で選びます。
2. 出力形式 はすでに CSS @font-face になっています。ルールを自分で書くなら Data URI か プレーン Base64 を選んでください。
3. 出力をコピー して、スタイルシートに貼り付けます。

Inter-Bold.woff2 という名前のファイルなら、結果は次のようになります（データは省略しています）。

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

font-family の名前はファイル名から作られます。拡張子を取り除き、英字、数字、空白、-、_ 以外の文字を空白に置き換えたものです。CSS で使っているファミリー名に書き換え、1 つのファミリーの複数のスタイルを埋め込むなら font-weight と font-style も追加してください。

format() ヒントと MIME タイプ

format() ヒントがあると、ブラウザは使えないソースをダウンロードせずに飛ばせます。埋め込みソースが 1 つだけならあまり重要ではありませんが、ブラウザが認識しないヒントだと、そのソースは飛ばされてしまいます。このツールはブラウザが報告する MIME タイプからヒントを決めますが、システムによってはフォントに珍しいタイプを報告します。OTF が format("truetype") で出力されたら、opentype に直してください。

TrueType フォントを包んだ WOFF2 は d09GMgABAAA で、CFF アウトラインを包んだものは d09GMk9UVE8 で始まります。

埋め込むフォントは小さく

Base64 はフォントファイルより 3 分の 1 大きく、しかも描画をブロックする CSS の中に置かれます。WOFF2 で 77,160 バイトのアイコンフォントを試したところ、Base64 は 102,880 文字になり、ページに何かが描画される前にそのすべてをダウンロードする必要がありました。

埋め込みを割に合うものにするには：

• WOFF2 を使います。同じフォントなら TTF や OTF よりずっと小さくなります。
• フォントをサブセット化します。ラテン文字以外のすべての文字体系など、不要なグリフを取り除くと、大きなフォントのサイズの大半を削れることがあります。フォントのサブセット化ツールでコマンドラインから行えます。
• 埋め込むのは 1 書体だけにします。ファーストビューで使う見出し用フォントやアイコンフォントは良い候補です。4 つのウェイトの本文用フォントは、ブラウザがキャッシュできる別ファイルにするほうが適しています。

フォントを埋め込むのが正解になる典型は、単体で完結する HTML 文書や、自前のフォントを持たなければならない canvas や SVG の書き出しです。

Base64 フォントを確認する

テキストがデフォルトのフォントで表示されてしまうなら、ブラウザの開発者ツールでフォントの読み込みエラーを探し、Data URI が data:font/ で始まっているか、ペイロードが上の表の接頭辞のいずれかで始まっているかを確認してください。PCFET0NUWVBF で始まるファイルは、フォントの拡張子で保存された HTML ページです。Base64 をフォントに変換 では、文字列をデコードしてグリフをプレビューし、ファイルとして保存できます。

よくある質問