Overview:

Nuxt Webfontloader is a tool that makes web font loading more efficient and easier. It is built on top of Google’s/Typekit’s webfontloader and improves site performance by loading web fonts asynchronously. It offers full support for SVGs as components and is fully tested. This tool is specifically designed for use with Nuxt 2.

Features:

• Full support of SVGs as components
• 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

Installation:

To install Nuxt Webfontloader, follow these steps:

1. Add nuxt-webfontloader as a dependency to your project using yarn or npm:

yarn add nuxt-webfontloader

2. Add nuxt-webfontloader to the modules section of your nuxt.config.js file:

modules: [
  'nuxt-webfontloader',
],

3. Include your webfontloader options in the nuxt.config.js file:

webfontloader: {
  google: {
    families: ['Open+Sans:400,700&display=swap'], // Replace with your desired font and options
  },
},

4. Remove old stylesheets from your app template or nuxt.config.js head part.

If you wish to add Google Fonts with font-display option, there is a slight difference depending on whether you want to add only one font family or more than one.

To add one font family with font-display option:

webfontloader: {
  google: {
    families: ['Open+Sans:400,700&display=swap'], // Replace with your desired font and options
  },
},

To add more font families with font-display option:

webfontloader: {
  google: {
    families: [
      'Open+Sans:400,700&display=swap', // Replace with your desired font and options
      'Roboto:400,700&display=swap',
    ],
  },
},

Summary:

Nuxt Webfontloader is a convenient tool for efficiently loading web fonts in Nuxt 2 projects. It offers features such as full SVG support, asynchronous loading of web fonts, and easy integration with Google Fonts. By following the installation guide, users can easily set up and use this tool to improve the performance and appearance of their websites.