Base64 をフォントに変換

Base64 のフォントをデコードする方法

1. Base64 または data URI に、素の Base64、data:font/woff2;base64,d09GMg… のような data URI、またはそれを含む CSS のいずれかを貼り付けます。1 つのルールに src が複数ある場合は、最初の data URI が使われます。
2. プレビューには、The quick brown fox jumps over the lazy dog 0123456789 というパングラムと、アルファベット全体の行がそのフォントで表示されます。サンプルテキスト に入力すれば、好きな言葉で試せます。
3. 情報欄には、フォントファイル自身が記録している情報が表示されます。フォントファミリー、スタイル、フルネーム、バージョン、グリフ数、em あたりのユニット数 です。
4. ファイルをダウンロード を押すと、形式に合った拡張子で保存されます。

ブラウザがフォントを受け付けると、情報欄の下のステータス行に「デコードしたフォントで描画しています。」と表示されます。フォントはこのページ専用の非公開の名前で登録され、別のものをデコードすると再び削除されます。ページの Content Security Policy が Cloudflare のページビュー計測以外のネットワーク通信を許さないので、ファイルがどこかへ送られることはありません。

形式と読み取れる情報

WOFF2 の場合、ファミリーの行には「読み取らず（WOFF2 のテーブルは Brotli 圧縮）」と表示されます。ページ自体は Brotli を展開せず、展開を行うブラウザのフォントエンジンはその結果を外に出さないからです。描画には影響しないので、フォントが正しく見えるかどうかは確認できます。保存した後に名前を読みたい場合は、fontconfig の fc-scan が WOFF2 に対応しています。

fc-scan --format "%{family}: %{style}\n" font.woff2

Material Icons フォントなら Material Icons: Regular と表示されます。

フォントが描画されない場合

「ブラウザがこのフォントを拒否しました。破損しているか、フォントではない可能性があります。」は、ブラウザのフォントサニタイザーがファイルを拒否したという意味です。Chrome と Firefox は、Web フォントを使う前に必ず構造上のエラーを確認します。途中で切れたフォントや、大きなファイルから誤ったオフセットで切り出したフォントは、このチェックに通りません。デコード後のサイズを元のものと比べてください。末尾が欠けた Base64 文字列をデコードすると、最後のテーブルが壊れたフォントになります。

情報欄に名前は表示されるのにサンプルが空のままなら、入力した文字のグリフがフォントにありません。次のような場合に起こります。

• アイコンフォント：記号は U+E000 以降などの私用領域のコードポイントに置かれています。Material Icons をはじめ合字（リガチャ）を使うフォントでは、home のようにアイコンの名前を入力するとアイコンが表示されます。
• サブセットフォント：Web ページは必要な文字だけを、ときには数十文字だけを埋め込むことがよくあります。ファイルに含まれる数は グリフ数 で分かります。
• ほかの文字体系用のフォント：アラビア文字やデーヴァナーガリー用に作られたフォントには、ラテン文字がないことがあります。

データがそもそもフォントでない場合は、注意書きにその正体が示されます。「これはフォントではなく PDF のようです。」などで、対応するダウンロードボタンも表示されます。

Base64 のフォントはどこから来るのか

ほとんどは CSS からです。ビルドツールは小さなフォントを data: URI としてスタイルシートにインライン化しますし、単一ファイルの HTML エクスポート、オフライン用のレポート、テキストを含む SVG ファイルも同じ方法でフォントを持ち運びます。インライン化にはコストがあり、埋め込んだフォントはスタイルシートと別にキャッシュできません。詳しくは data URI のパフォーマンス を参照してください。フォントファイルをこうしたルールに変換するには、フォントを Base64 に変換 を使ってください。

Python でスタイルシートからすべてのフォントを取り出す

このツールは最初に見つかった data URI をデコードします。複数のフォントを埋め込んだスタイルシートなら、短いスクリプトですべてを正しい拡張子で保存できます。

import base64, re

SIGNATURES = {b"wOF2": "woff2", b"wOFF": "woff", b"OTTO": "otf", b"\x00\x01\x00\x00": "ttf", b"ttcf": "ttc"}

css = open("icons.css").read()
pattern = r"data:[^;,]*(?:;[^;,]*)*;base64,([A-Za-z0-9+/=\s]+)"
for i, b64 in enumerate(re.findall(pattern, css)):
    data = base64.b64decode(b64)
    ext = SIGNATURES.get(data[:4], "bin")
    with open(f"font-{i}.{ext}", "wb") as f:
        f.write(data)
    print(f"font-{i}.{ext}", len(data), "bytes")

拡張子を先頭 4 バイトから決めているのは、スタイルシートではフォントのラベルがいい加減なこと（application/font-woff、application/octet-stream）が多いからです。詳しくは Python での Base64 を参照してください。

よくある質問