BLOG

• 2023.04.09
• Nuxt.js

Nuxt3でGoogle FontsとAdobe Fontsを使う

nuxt.config.ts

※Google fontsはMontserratを例にしています

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        {
          rel: 'preconnect',
          href: 'https://fonts.googleapis.com'
        },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap',
          crossorigin: ''
        },
      ],
      script: [
        {
          src: 'https://use.typekit.net/{プロジェクトID}.js',
        },
      ],
    },
  },
})

index.vue

<script>
  
export default {
  mounted() {
    try {
      Typekit.load({ async: true });
    } catch (e) {
      console.log(e);
    }
  }
}

</script>

あとはCSSでfont-familyを指定する

今日のひとこと

もう4月ですか？

• 

• この記事を書いた人小林 友加

  こう見えてドラムぼちぼち叩けます。サウナ依存中