Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@keyakko

Nuxt.jsでいい感じにAdobe fontsのwebフォントを読み込む

More than 1 year has passed since last update.

Adobe fontsで日本語(東アジアの言語)を含むフォントを選択した場合、こんな感じのスクリプトの埋め込みを指示されると思います。

<script>
  (function(d) {
    var config = {
      kitId: '######',
      scriptTimeout: 3000,
      async: true
    },
    h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
  })(document);
</script>

これをNuxt.jsのプロジェクトへ組み込むメモです。

スクリプトの読み込み

adobeからスクリプトを読み込ませます。

nuxt.config.js
export default {
  head: {
    script: [
      { src: 'https://use.typekit.net/<PROJECT_ID>.js' }
    ]
  }
  /* 他の設定は省略 */
}

<PROJECT_ID>にAdobe Fontsで設定したWebプロジェクトのIDを入れてください。

Typekitを実行

任意の場所でTypekit.load({async: true})を実行するとフォントが読み込まれます。

layout/default.vue
<script>
export default {
  mounted() {
    Typekit.load({async: true})
  }
}
</script>

フォントの読み込みが完了する前に字形の異なる文字が表示されると都合が悪い場合は、loading周りといい感じに連携してください。

layout/default.vue
<script>
export default {
  loading: false,
  mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      Typekit.load({
        async: true,
        active: () => {this.$nuxt.$loading.finish()}
      })
    })
  }
}
</script>
components/loading.vue
<template>
  <transition name='l'>
    <div v-if="loading" class="h-screen fixed inset-x-0 top-0 bg-white"></div>
  </transition>
</template>

<script>
export default {
  data: () => ({ loading: true }),
  methods: {
    start()  { this.loading = true  },
    finish() { this.loading = false },
  },
}
</script>

<style lang="css" scoped>
.l-enter-active { transition: all .5s ease-out }
.l-leave-active { transition: all .5s ease-out }
.l-enter, .l-leave-to { opacity: 0 }
.l-enter-to, .l-leave { opacity: 1 }
</style>

nuxt.config.js
export default = {
  loading: '@/components/loading.vue'

  /* 他の設定は省略 */
}

さいごに

scriptTimeoutの設定は無視してるんで、そこはまたいい感じに...

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
keyakko
ねこかわいい

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?