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

问题

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', ]

回答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

来源：https://stackoverflow.com/questions/54083703/nuxt-js-preload-woff-fonts-loaded-as-font-face