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

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:

%d bloggers like this: