ネットを探しても無かったので載せときます。

サブセットの話

日本語のフォントというのは、アルファベットに比べて文字数が多いため

常用漢字だけに絞ってパッケージングし直したりしているんですが。(サブセット化)

最近ではダイナミックサブセットといって、そのページで使われている文字だけを

動的にサブセットする方法が流行っており、AdobeのTypekitしかり、FontPlusしかりTypeSquareしかりです。

ただ、ちょっと問題があってHTMLで作られたサイトなら簡単なのですが

Vue.jsなどJSによってレンダリングされているサイトの場合は、各社がサンプルで提供している方法では

フォントが適用されません。

なぜなら、JS描画なので、初期ロードのHTMLには何も文字が描画されていなため、0文字のサブセットになってしまうようです。

ダイナミックサブセットと Web フォント提供

JSでのレンダリング後にサブセット化すれば解決

各社ではJSのAPIを用意してくれているので、フォントのロードタイミングを工夫することで解決するというわけです。

結論から言うとこれでいけました。

nuxt.config.js または、各ページのheadセクションでScriptをロード。
「xxxxxxx.js」は自分のtypekitのidが入ります。

head: {
script: [
{ src:'https://use.typekit.net/xxxxxxx.js'}
}

あとは、各ページのupdatedセクションとかでTypekit.load()を実行してあげます。

updated () {
try{
Typekit.load({ async: true });
} catch(e){
console.log("[error]load typekit.")
}
}

これでloadされたタイミングでフォントが切り替わりました。

ネットで検索するとwebfontloaderを使う事例が見受けられますが

ダイナミックサブセットに対応してないようで上手く動きませんでした。

参考

埋め込みコード

2022/06追記

どうやら、上記の方式はもう通用しなくなっており
下記の記事で解説している方法で、いけました。

NuxtでAdobe Fontsを利用する(日本語対応) | eureka

Receive the latest news in your email
Table of content
Related articles