You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Improves site performance by loading web-fonts asynchronously
Nuxt 2 (and only Nuxt 2) support
Fully tested!
Setup
Add nuxt-webfontloader as a dependency using yarn or npm to your project
Add nuxt-webfontloader to modules section of nuxt.config.js
{modules: ['nuxt-webfontloader',],}
Include your webfontloader options in the nuxt.config.js, for example:
exportdefault{webfontloader: {google: {families: ['Lato:400,700']//Loads Lato font with weights 400 and 700}},}
Remove old stylesheets from your app template or nuxt.config.js head part:
exportdefault{head:{link: [// You don't need that line anymore!{rel: 'stylesheet',href: 'https://fonts.googleapis.com/css?family=Lato:400,700'}]}}
Adding Google Fonts with Font Display option
If you like to use Goggle Fonts with font-display option, this is possible.
But there is a small difference if you want to add only one Font Family or more than one.
Here an example for adding one font family with font-display option:
exportdefault{webfontloader: {google: {// Loads Open Sans font with weights 300 and 400 + display font as swapfamilies: ['Open+Sans:300,400,600&display=swap']}},}
Here an example for adding more font families with font-display option:
exportdefault{webfontloader: {// add Google Fonts as "custom" | workaround requiredcustom: {families: ['Open Sans:n3,n4','Roboto:n3,n7'],urls: [// for each Google Fonts add url + options you want// here add font-display option'https://fonts.googleapis.com/css?family=Open+Sans:300,400&display=swap','https://fonts.googleapis.com/css?family=Roboto:300,700&display=swap']}},}
Development
Clone this repository
Install dependencies using yarn install or npm install