【adobe fonts を blob化したい】SVG textをcanvasで画像(png)変換すると、font-familyが無視される

Question

前提

SVGをcanvasを使用して画像に変換していますが、
以下の時、<text ...> の font-family が画像に反映されません。

• svg の中で <text ...> を使用している
• font-family は、adobe font である
• 日本語フォント (ex. kozuka-mincho-pro)
• adobe font は、Web プロジェクトページ で生成される script タグを使用して埋め込み
  • 参考: https://helpx.adobe.com/jp/fonts/using/embed-codes.html

※他の自作フォントは、blob化することで、画像にもfont-familyが反映できています。
※ブラウザ上（SVGの時点）では、adobe font の font-family も反映されています。

何か知見ありましたら、アドバイスいただけると幸いです。
よろしくお願いいたします。

実現したいこと

最終的に、

• canvasで生成した画像で、<text ...>の font-familyが適用されていること
• 例えば、kozuka-mincho-pro

↓

• blob化したら解決しそうなので、adobe fonts を blob化したい

発生している問題・エラーメッセージ

SVGをcanvasで画像（png）に変換したときに、
font-familyが適用されず、デフォルト?のフォントスタイルになってしまう。

該当のソースコード

classに、.sample を指定しています。

<svg ...>
  ...
  <text font-size="12" x="0" y="0" 
    class="sample" fill="#ffffff" rorate="0" text-anchor="middle"
    dominant-baseline="central"
  >
    サンプルテキスト
  </text>
</svg>

試したこと

１） blob化
canvasでfont-familyを適用するには、blobにする必要があるとの、記事を見ましたので
試してみました。（adobe以外のサーバーにある自作フォントは、これで解決済）

※xxxxxxx.js は 仮です。 実際は、adobeのkitIdが入ります。

         const svg = document.getElementById("svg_sample")
         const style = svg.getElementsByTagName("style")[0]

          const json = await axios.get(https://use.typekit.net/xxxxxxx.js, { responseType: 'blob' })
          const data = json.data
          const blob = new Blob([data], {type: "font/woff;charset=utf-8"})

          let reader = new FileReader()
          reader.readAsDataURL(blob)

          reader.onload = () => {
            const dataURL = reader.result
            const font_face_css = `@font-face { font-family: sample; src: url("${dataURL}"); }`
            const font_class = `.sample { font-family: sample; }`
            const add_html = `${font_face_css} ${font_class}`

            style.insertAdjacentHTML('beforeEnd', add_html);
          }

画像どころか、ブラウザ上でもfont-familyが反映されません。

２）text に 直接 font-family 指定

const svg = document.getElementById("svg_sample")
const textEls = svg.getElementsByClassName(`sample`)
const targetTextEl = textEls[0]
targetTextEl.setAttribute("font-family", "kozuka-mincho-pro")

↓

  <text font-size="12" x="0" y="0" 
    class="sample" fill="#ffffff" rorate="0" text-anchor="middle"
    dominant-baseline="central"
    font-family="kozuka-mincho-pro" // ここが追加されます
  >
    サンプルテキスト
  </text>

blobにしてないので、canvas処理ではfont-familyが反映されない？

補足情報（FW/ツールのバージョンなど）

Vue 3.0
SVGを画像にする方法はこちらを参考にしています（成功しています）
: https://blog.asial.co.jp/1615

Answer 1

axios.get(https://use.typekit.net/xxxxxxx.js,

JavaScript のソースコードを data: URL にしてもフォントデータとしては動きませんね。

SVG内の<style>内で @import でフォントを指定するとどうでしょうか。

Comments

[yooonb]

回答ありがとうございます。
> JavaScript のソースコードを data: URL にしてもフォントデータとしては動きませんね。
JSを変換しても、フォントデータとして使用できないとのこと理解しました。

> SVG内の<style>内で @import でフォントを指定するとどうでしょうか。
adobeの「日本語フォント」を使用している時点で、
@import で使用するリンクがadobeから提供されず、
使用できないようです。

■詳細
このURLにある 「@import 埋め込みコード」部分のように、指定するはずですが、
https://helpx.adobe.com/jp/fonts/using/embed-codes.html
東アジア言語では、JavaScript 埋め込みコードしか提供されない

[int32_t]

> 東アジア言語では、JavaScript 埋め込みコードしか提供されない

では、実現不可能だと思います。SVG を <img> や Image 経由で描画する場合はJavaScriptを動かす手段がありません。

[yooonb]

> SVG を <img> や Image 経由で描画する場合はJavaScriptを動かす手段がありません。
ありがとうございます。
blobにするのは、実現不可能ということが分かり少しすっきりしました。

int32_t様から回答をいただき、
以下の理由で、別のアプローチが必要なのかなと考えましたので、
画像にadobe fontが反映される方法をもう少し模索してみます。
- adobeからは、blob化に使えそうなリンクが提供されない
- JSコード を data: URL してもフォントデータとして動かない

※検討: <text ...> (可変) を、JS で svg の path に変換する

回答いただきありがとうございました。

[int32_t]

あ、でも、adobeが提供するJavaScriptを実行した結果、何かのURLにアクセスしてフォントデータを取ってきているはずなので、そのURLからblob化はできるかもしれません。

そういうリバースエンジニアリングや正規ではないアクセス方法をabobeが許諾しいてるかどうかは知りませんが。

[yooonb]

ありがとうございます。
なるほど、その考えは思い浮かびませんでした。
adobe がアクセスしてるであろうURLを探します。
（jsの中身を見てそれらしいものは、ありましたが、解読まで至っていません。）

> そういうリバースエンジニアリングや正規ではないアクセス方法をabobeが許諾しいてるかどうかは知りませんが。
こちらも調べてみます。

また、フォントについてadobe公式にも問い合わせてみます。

進展あったら、ご報告します。