Awesome Open Source
Awesome Open Source

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

npm (scoped with tag) npm Build Status codecov Dependencies js-standard-style thanks

📖 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' }
    ]
  }
}

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:

export default {
  webfontloader: {
    google: {
      // Loads Open Sans font with weights 300 and 400 + display font as swap
      families: ['Open+Sans:300,400,600&display=swap']
    }
  },
}

Here an example for adding more font families with font-display option:

export default {
  webfontloader: {
      // add Google Fonts as "custom" | workaround required
      custom: {
          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
  • Start development server using npm run dev

License

MIT License

Copyright (c) Alexander Lichter


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (68,063
font (245
nuxt (216
nuxtjs (120
nuxt-module (70
webfont (17

Find Open Source By Browsing 7,000 Topics Across 59 Categories