Loading Web Fonts with the Web Font Loader in Nuxt.JS

Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have.

Now, let ‘s do it for Nuxt.JS. This is steps to configure:

  • Include webfontloader via npm install webfontloader --save
  • Add webFontLoader.js file to /plugins folder:
import WebFont from 'webfontloader';

WebFont.load({
google: {
families: ['Fira Sans:400,500,600,700:latin,vietnamese']
}
});
  • Adjust nuxt.config.js:
plugins: [
{src: '~/plugins/webFontLoader.js', ssr: false}
],

Reference resources: