SVGファイルの<text>タグでWeb Fontを指定する

2022/04/14 追記

OpenSeaのビューワだとこの記事の方式でフォントを指定しても反映されない模様。
外部からデータを取って来ることを制限されている。
<image>タグもOpenSeaでは正しく表示されなかった。残念。

---

フルオンチェーンのNFTを作ってたらtextタグのフォント指定で少し迷ったのでメモ。

以前NFTを作成した時はローカルのフォントを指定する形となっており、Windowsとそのフォントを標準搭載していないMac&iOSでは見え方が異なっていました。これがとても嫌だったので今回はWeb Font(Google Fonts)を利用します。

1.Google Fontで利用したいフォントを探す

https://fonts.google.com/
こんな感じで使用したいフォントを選択し、SVGタグに埋め込む用のコードを表示します。

2.SVGファイルの<defs>タグに貼り付けて編集する

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <style>
            <![CDATA[@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap");]]>
            .cls-1{font-family: 'Noto Sans JP', sans-serif;}
        </style>
    </defs>

    <text x="20" y="50" class="cls-1">テストテキスト123456789abdce</text>
</svg>

1.で取得した<style>タグのコードを<defs>タグ内に貼り付けます。
ここで注意すべきなのが、@import ～ );の部分を <![CDATA[ ～ ]]>でくくってあげること。
これがないとSVG構文エラーが発生します。

あとは1のCSS rules to specify familiesのコードを好きなクラスのCSS定義に貼り付ける。
そして<text>タグにクラスを割り当てれば無事Web Fontが反映されます。

ブラウザで表示するとこんな感じ