AIのブラウザツールがWebフォントを読まない時

SVGのサムネを、SNS共有用のPNGに変換したいだけだった

このブログ（FLOW）では記事ごとにthumb.svgというバナー型のサムネを用意している。一覧ページではSVGをそのまま埋め込めばWebフォントも効くが、X（旧Twitter）やSlackのカード表示（OGP）はSVGを描画してくれない。だから1200×630のSVGを、同じ見た目のPNGに焼き直すogp.pngが別途必要になる。

やることは単純で、SVGを表示したHTMLをブラウザで開いてスクリーンショットを撮ればいい。ブラウザ自動化ツール（本サイトの執筆環境ではAIエージェント経由のブラウザプレビュー）で、そのSVGを埋め込んだ一時HTMLを開いてみた。

結果は、日本語の見出しがゴシック体ではなくOSの代替フォントで描画され、文字間隔も崩れていた。CSSでは確かにZen Kaku Gothic NewをGoogle Fontsから読み込む指定をしている。指定は効いていない。

「プロジェクトの中か外か」の判定が、想定と違う場所で切られていた

エラーメッセージと挙動を辿って分かった、詰まりポイントの実体。

「ブラウザで見る」ツールを諦め、「ブラウザを動かす」コードに切り替えた

AIエージェントに用意されたブラウザプレビューは、あくまで人間が見るプレビュー用に設計されたサンドボックスであり、CSPの緩和は用途の外にある。そこで、プレビューツールではなくPythonから Playwright のheadless Chromiumを直接起動する経路に切り替えた。

実行環境にはplaywright==1.61.1がすでにグローバルに導入済みで、追加インストールは不要だった。手順は次の3ステップだけ。

# thumb.svg をそのまま読み込むだけの最小HTMLを用意し、
# headless Chromiumで開いてスクリーンショットを撮る
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page(viewport={"width": 1200, "height": 630})
    page.goto(f"file://{html_path}")
    page.wait_for_timeout(500)  # Webフォント読み込み待ち
    page.screenshot(path="ogp.png")
    browser.close()

プレビューツールが「外部か内部か」を判定していたのに対し、Playwrightを自前で起動する経路にはそもそもその判定が存在しない。ローカルのfile://ページであっても、Chromiumが通常通りネットワークからGoogle Fontsを取得しに行き、wait_for_timeoutでフォント読み込みの完了を待ってから撮影すれば、一覧ページと同じ見た目のPNGがそのまま得られた。

詰まったツールの中で粘る前に、経路そのものを疑う

ブログ・LP・OGP画像のように「見た目を画像として固定する」作業をAIエージェントに自動化させている場合、同じ壁に当たる可能性がある。次に同じ症状に出会ったときのために、判断のポイントだけ残しておく。