html-to-image というパッケージのフォント処理は次のとおりです:
- スタイル規則の走査: ページに読み込まれているすべてのスタイルシート（
document.styleSheets）を走査し、@font-faceルールを見つけて、フォント名と対応するフォントファイルの URL（例:.woff2）を取得します。 - フォントの取得とインライン化: これらの
@font-faceのsrcが指すフォントファイルをダウンロードし、Base64 の Data URI に変換します。 - 埋め込みフォント付き SVG の生成: その
@font-faceルール（Data URI 付き）を内部で生成した SVG に書き込み、その SVG を Canvas に描画して、最終的に PNG や JPEG を出力します。
問題は2つ目にあります。Google Fonts はスクリプトによる取得を CORS でブロックします。 「エラーは出るのにフォントは普通に見える」という状況になることがあります。これは、レンダーコンポーネント外のブラウザキャッシュのフォントを拾って処理しているためです。レースコンディションを引き起こす可能性があり、頼るべきではありません。
対処法:
- フォントを自前でダウンロードして、自分のドメインでホストする。
- Google Fonts を使う場合は、BunnyCDN の互換フォントホスト（無料）に切り替える。
Access-Control-Allow-Origin: *が設定されています。