nuxt-font-loader

Simple, modern and lightweight font loader for Nuxt projects.

Usage no npm install needed!

<script type="module">
  import nuxtFontLoader from 'https://cdn.skypack.dev/nuxt-font-loader';
</script>

README

Nuxt Font Loader

Simple, modern and lightweight font loader for Nuxt projects

Features

  • Supports all types of font loading 🔥 (local, Google, Typekit, custom, etc.)
  • Follows the best practice for modern, fast and efficient font loading
  • Eliminates render-blocking resources and improves site performance by loading the font css asynchronously
  • Includes settings for resource hints prefetch, preconnect and preload
  • Super-easy to use without complicated settings and additional code bloat
  • Minimal working configuration with just one line of code 🤯
  • Tested in dev and prod mode (supports SPA & SSR)
  • Automatically sets the best settings based on your url option
  • Supports loading multiple font sources at the same time
  • Fully customizable settings for advanced usage

Setup

  1. Add nuxt-font-loader dependency to your project
$ npm install --save-dev nuxt-font-loader # yarn add --dev nuxt-font-loader
  1. Add nuxt-font-loader to the buildModules section of nuxt.config.js
// nuxt.config.js

export default {
  buildModules: ['nuxt-font-loader'],

  fontLoader: {
    /* module options */
  }
}

Examples

💻 Here are some code examples

Local font loading

Basic usage

// nuxt.config.js

{
  fontLoader: {
    url: '/fonts/font-face.css'
  }
}

font-face.css

/* Define @font-face rules */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/I-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/I-400.woff2') format('woff2');
}

Specify families

/* Specify the font-family as usual */

html {
  font-family: 'Inter', sans-serif;
}

Google font loading

Basic usage

// nuxt.config.js

{
  fontLoader: {
    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap',

    prefetch: true,
    preconnect: true
  }
}

Specify families

/* Specify the font family as usual */

html {
  font-family: 'Roboto', sans-serif;
}

Custom font loading

Basic usage

// nuxt.config.js

{
  fontLoader: {
    // Paste a new custom link here (for example Typekit)
    url: 'https://use.typekit.net/xxxxxxx.css',

    prefetch: true,
    preconnect: true
  }
}

Specify families

/* Specify the font family as usual */

html {
  font-family: 'New Custom Family', sans-serif;
}

Multiple sources usage example

✅ Automatically sets the best settings based on your url option

// nuxt.config.js

{
  fontLoader: {
    url: {
      local: '/fonts/font-face.css',
      google: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap',
      custom: 'https://use.typekit.net/xxxxxxx.css'
    }
  }
}

Use this method if you want to load multiple font sources at the same time

Specify families

/* Specify the font family as usual */

html {
  font-family: 'Inter', sans-serif; /* Local */
}

nav {
  font-family: 'Roboto', sans-serif; /* Google */
}

h1 {
  font-family: 'New Custom Family', sans-serif; /* Custom */
}

Advanced usage example

⚠️ Use these methods only if you want to customize the default settings (optional)

// nuxt.config.js

{
  fontLoader: {
    url: 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap',

    prefetch: {
      hid: 'my-font-prefetch',
    },

    preconnect: {
      hid: 'my-font-preconnect',
      crossorigin: 'anonymous',
    },

    preload: {
      hid: 'my-font-preload',
    },

    noscript: {
      hid: 'my-font-noscript',
    }
  }
}

// nuxt.config.js

{
  fontLoader: {
    url: {
      local: '/fonts/font-face.css'
    },

    preload: {
      local: {
        hid: 'my-font-preload'
      }
    },

    noscript: {
      local: {
        hid: 'my-font-noscript'
      }
    }
  }
}

⚙️ Following these examples, it is possible to customize all settings as needed

Options

Default options

// nuxt.config.js

{
  fontLoader: {
    url: {
      local: undefined,
      google: undefined,
      custom: undefined,
    },
    prefetch: false,
    preconnect: false,
    preload: {},
    noscript: {},
    stylesheet: true,
  }
}

url

  • Default: {}

Defines the path of the css file that includes all @font-face rules.

⚠️ This option is required.

prefetch

  • Default: false

Enable this if you request fonts from a third-party server, such as Google, Typekit, etc.

✅ When used with multiple sources method, this is enabled by default

<link rel="dns-prefetch" href="https://fonts.gstatic.com/" />

More info

preconnect

  • Default: false

Enable this if you request fonts from a third-party server, such as Google, Typekit, etc.

✅ When used with multiple sources method, this is enabled by default

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />

More info

preload

  • Default: {}

Preloads a css file to increase its priority.

<link rel="preload" as="style" href="/path/to/font-face.css" />

More info

noscript

  • Default: {}

Provides a fallback option in case the user disables javascript.

<noscript><link rel="stylesheet" href="/path/to/font-face.css" /></noscript>

More info

stylesheet

  • Default: true

Eliminates render-blocking effect and improves site performance by loading the font css asynchronously.

<link rel="stylesheet" href="/path/to/font-face.css" />

Links

License

Nuxt Font Loader

MIT License

Copyright (c) Ivo Dolenc