ネットを探しても無かったので載せときます。
サブセットの話
日本語のフォントというのは、アルファベットに比べて文字数が多いため
常用漢字だけに絞ってパッケージングし直したりしているんですが。（サブセット化）
最近ではダイナミックサブセットといって、そのページで使われている文字だけを
動的にサブセットする方法が流行っており、AdobeのTypekitしかり、FontPlusしかりTypeSquareしかりです。
ただ、ちょっと問題があってHTMLで作られたサイトなら簡単なのですが
Vue.jsなどJSによってレンダリングされているサイトの場合は、各社がサンプルで提供している方法では
フォントが適用されません。
なぜなら、JS描画なので、初期ロードのHTMLには何も文字が描画されていなため、0文字のサブセットになってしまうようです。
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を使う事例が見受けられますが
ダイナミックサブセットに対応してないようで上手く動きませんでした。
参考