Nuxt.jsアプリを初回ロードした際にAdobe fontsが表示されない

お世話になっております。

現在、Nuxt.jsとAdobe fontsを使用したアプリ開発を行っています。
こちら(https://mykii.blog/nuxt-use-adobefonts-ja/) の記事を参考にAdobe Fontsの適用コードを記述したのですが、Herokuでアプリを開いた際にAdobe fontフォントが反映されず悩んでいます。

しかし、アプリ内のクリックイベントによって同フォントが適用された別のテキスト(h1タグ)が出現すると、反映されてなかった部分を含めて出現したその瞬間にAdobe fontsが反映される、という現象が起こっています。

Typekit.load(async: true)を各ページファイルやdefault.vueで実行する
全てのページに@import url("https://use.typekit.net/XXXXXX.css");を追加する
nuxt.config.js内のhead → script → srcにhttps://use.typekit.net/XXXXXXX.jsを記述する

など、私の知る限り調査する限りの手を尽くしてみましたが、いずれも効果がありませんでした。
どうにかしてAdobe fontsをフォントをページを開いた瞬間から反映する方法はないのでしょうか…？

私の力不足 / 知識不足ながら大変恐縮ではございますが、ご存知の方がいらっしゃいましたらご教授いただければ幸いです。
何卒、よろしくお願い申し上げます。

発生している問題

Nuxt.js内でAdobe fontsを適用してHerokuで公開したが、アプリページを開いた際に適用したフォントが反映されない。
※非反映時の従来のフォント(Yu Gothic)での表示になっています。

###やったこと

Typekit.load(async: true)をdefault.vueや各ページの.vueファイルに追加/削除した
全ての.vueページに@import url("https://use.typekit.net/XXXXXXX.css");を追加した
nuxt.config.js内のhead → script → srcにhttps://use.typekit.net/XXXXXXX.jsを記述する

参考にした記事
Nuxt.jsでいい感じにAdobe fontsのwebフォントを読み込む
− (https://qiita.com/keyakko/items/f313290437bbd8044573)
Adobe Fonts を使用できない場合の対処方法
− (https://helpx.adobe.com/jp/creative-cloud/kb/cq03130152.html)

###現在のソースコード

lang
1module.exports = {
2  head: {
3    title: 'XXXXXXX',
4    script: [
5      { src: 'https://use.typekit.net/XXXXXXX.js' },
6      { src: 'https://platform.twitter.com/widgets.js' }
7    ],
8    meta: [
9      { charset: 'utf-8' },
10      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
11      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
12    ],
13    link: [
14      { rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }
15    ]
16  },
17  loading: '~/components/loading.vue',
18  modules: [
19    'nuxt-webfontloader',
20    '@nuxtjs/axios',
21    '@nuxtjs/dotenv',
22  ],
23  axios: {
24    // proxy: true
25  },
26  serverMiddleware: [
27    { path: "/contact/", handler: "~/api/" },
28  ],
29  webfontloader: {
30    google: {
31      families: ['Heebo:700&display=swap&text=XXXXXXXX']
32    }
33  },

defaultVue
1<template>
2  <div>
3    <nuxt />
4    <Menu />
5  </div>
6</template>
7
8<script>
9import Menu from '~/components/common/Menu.vue';
10export default {
11  components: {
12    Menu,
13  },
14  mounted: function(){
15      Typekit.load({
16        async: true,
17    })
18  }
19};
20</script>
21
22<style lang="scss">
23@import url("https://use.typekit.net/rgg8nft.css");
24$font-en: 'din-condensed', sans-serif;
25$font-ja: "Yu Gothic Medium", "游ゴシック Medium", '游ゴシック', "游ゴシック体", 'Yu Gothic', YuGothic, 'メイリオ', 'Meiryo', sans-serif;
26div.menu {
27  position: fixed;
28}
29*{
30  -webkit-font-smoothing: antialiased;
31}
32</style>

packageJson
1{
2  "name": "XXXXXXX",
3  "version": "1.0.0",
4  "description": "Nuxt.js project",
5  "author": "XXXXXXX XXXXXXX>",
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13    "precommit": "npm run lint"
14  },
15  "dependencies": {
16    "@nuxtjs/axios": "^5.12.4",
17    "@nuxtjs/dotenv": "^1.4.1",
18    "contentful": "^7.14.8",
19    "core-js": "^2.6.12",
20    "express": "^4.17.1",
21    "fs": "0.0.1-security",
22    "gsap": "^3.5.1",
23    "net": "^1.0.2",
24    "nodemailer": "^6.4.17",
25    "nuxt": "^2.0.0",
26    "nuxt-webfontloader": "^1.1.0",
27    "swiper": "^6.3.5",
28    "vue-awesome-swiper": "^4.1.1"
29  },
30  "devDependencies": {
31    "babel-eslint": "^10.0.1",
32    "eslint": "^4.19.1",
33    "eslint-friendly-formatter": "^4.0.1",
34    "eslint-loader": "^2.1.1",
35    "eslint-plugin-vue": "^4.0.0",
36    "fibers": "^5.0.0",
37    "sass": "^1.27.0",
38    "sass-loader": "^10.0.4"
39  }
40}