How to preload fonts in nuxt 3?

Question

In nuxt 2 we added this in nuxt.config.js

 link: [
    
      {
        rel: 'preload',
        type: 'font/woff2',
        href: '/fonts/font.woff2',
        as: 'font',
        crossorigin: true
      },

I can't find any info how to do the same in nuxt 3. I need the fonts not to jump when the page is reloaded.

Answer 1

Put it in the app.vue file via the useHead composable:

<script setup>

useHead({
  link: [
    {
      rel: 'preload',
      type: 'font/woff2',
      href: '/fonts/font.woff2',
      as: 'font',
      crossorigin: ''
    },
)}

</script>