More than 3 years have passed since last update.

Nuxt.jsのSPAモードでTypeSquareのWebフォントをロードする

Posted at 2020-08-20

NuxtでTypeSquare使う情報があまりなかったので。

普通の静的ページだとヘッダーでTypeSquareのスクリプトを読み込ませてあげれば、スクリプトがよしなにDOM中の文字を解析してサブセットフォントをロードしてくれるが、NuxtのSPAモードだとDOMコンテンツが組み立てられる前にスクリプトが動いてしまうみたいで、フォントが表示されなかった。

なので、最初のスクリプトロード時にはフォントをロードしないようにして

nuxt.config.js

head: {
    script: [
      {
        src: "//typesquare.com/3/tsst/script/ja/typesquare.js?hogehoge%3D&onload=false"
      }
    ]
}

フォントを使いたいページで

pages/index.vue

<script>
export default {
  mounted() {
    Ts.loadFont();
  }
}
</script>

とやると表示されました。

もっと正しいやり方知ってる人は教えてください。