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

4877 ワード

2022/04/14 追記

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


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

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

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