nuxt-webfontloader

Nuxt Webfontloader - Efficient web font loading has never been easier!

📖 Release Notes

Features

• Full support of SVGs as components. Import them like your Vue SFCs
• Built on top of Google's/Typekit's webfontloader
• 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:

export default {
  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:

export default {
  head:{
    link: [
      // You don't need that line anymore!
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Lato:400,700' }
    ]
  }
}

Development

• Clone this repository
• Install dependencies using yarn install or npm install
• Start development server using npm run dev

License

MIT License

Copyright (c) Alexander Lichter