nuxt.js - preload .woff fonts loaded as @font-face

Question

Trying to improve my google score and google is telling me to use preload on the two custom fonts i'm using to save a whopping 4.5 seconds? currently the fonts are stored in assets/fonts and then being loaded as @font-face in typography.scss file when is then loaded in the nuxt.config.js file inside css: [ '@/assets/scss/typography.scss', ]

Answer 1

So I guess you are asking how to preload a font? There is a way to call a render function in nuxt.config.js that will preload fonts, and scripts and styles, and then have them available in the client so you do not have to load the font in your scss file, just set it. Try this:

//nuxt.config.js

module.exports = {
  mode: ' your mode ',

  ...

  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }

  },
  ...

}

You should also probably store your fonts in the static folder. /static/fonts/yourfonts.woff2