Simple, Modern and Lightweight Font Loader for Nuxt Projects

Simple, Modern and Lightweight Font Loader for Nuxt Projects

Nuxt Font Loader .Simple, modern and lightweight font loader for Nuxt projects

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
  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

Local font loading

Basic usage

// nuxt.config.js

{
  fontLoader: {
    url: '/fonts/font-face.css' // Path to your css file
  }
}

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');
  /* Consider adding a 'unicode-range' CSS descriptor */
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/I-400.woff2') format('woff2');
  /* Consider adding a 'unicode-range' CSS descriptor */
}

Specify families

/* Specify the font-family as usual */

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

Google font loading

Basic usage

// nuxt.config.js

{
  fontLoader: {
    // Paste a google link here
    url: 'https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700&display=swap',

    // Enable options
    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://new-custom-link/',

    // Enable options
    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:[email protected];400;500;700&display=swap',
      custom: 'https://new-custom-link/'
    }
  }
}

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 (optional)

Use these methods only if you want to customize the default settings

// nuxt.config.js

{
  fontLoader: {
    url: 'https://fonts.googleapis.com/css2?family=Roboto:[email protected];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

Download Details:

Author: ivodolenc

Source Code: https://github.com/ivodolenc/nuxt-font-loader

vue vuejs javascript nuxtjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7