Web Design Articles

ネットを探しても無かったので載せときます。 サブセットの話 日本語のフォントというのは、アルファベットに比べて文字数が多いため常用漢字だけに絞ってパッケージングし直したりしているんですが。（サブセット化） 最近ではダイナミックサブセットといって、そのページで使われている文字だけを動的にサブセットする方法が流行っており、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