Helps to Load Fonts and Activate Them By Preloading

Helps to Load Fonts and Activate Them By Preloading

nuxt-font-loader-strategy helps loading the fonts and provides a loading strategy based on preloads.

nuxt-font-loader-strategy

Helps to load the fonts and activate them by preloading.

nuxt-font-loader-strategy helps loading the fonts and provides a loading strategy based on preloads.

Define yourself which fonts will be unlocked first. This gives the best experience in the initial viewport of the website.

Features:

  • Use preload to prevent font flashs.

  • Generates the @font-face definitions automatically and includes them in the layout.

  • Increases the Pagespeed Insight Score 🎉

  • Take the fonts from Minimize critical request depth and load them via WebWorker.

  • Deactivate fonts at low connection. (Show Browser-Support)

    ⚠️ Configuration of the fonts must be included only in the module settings.

Setup

  1. Add nuxt-font-loader-strategy dependency to your project
yarn add nuxt-font-loader-strategy # or npm install nuxt-font-loader-strategy
  1. Add nuxt-font-loader-strategy to the modules section of nuxt.config.js
{
  modules: [

    ['nuxt-font-loader-strategy', { 
        ignoreLighthouse: true,
        ignoredEffectiveTypes: ['2g', 'slow-2g'],
        fonts: [
          // Font
          {
            fileExtensions: ['woff2', 'woff'],
            fontFamily: 'Font A',
            fontFaces: [
              // Font-Face
              {
                preload: true,
                localSrc: ['Font A', 'FontA-Regular'],
                src: '@/assets/fonts/font-a-regular',
                fontWeight: 400,
                fontStyle: 'normal'
              },
              // Font-Face
              {
                localSrc: ['Font A Light', 'FontA-Light'],
                src: '@/assets/fonts/font-a-300',
                fontWeight: 300,
                fontStyle: 'normal'
              },
              // Font-Face
              {
                localSrc: ['Font A Light Italic', 'FontA-LightItalic'],
                src: '@/assets/fonts/font-a-300Italic',
                fontWeight: 300,
                fontStyle: 'Italic'
              }
            ]
          },
          // Font
          {
            fileExtensions: ['woff2', 'woff'],
            fontFamily: 'Font B',
            fontFaces: [
              // Font-Face
              {
                preload: true,
                src: '@/assets/fonts/font-b-regular',
                fontWeight: 400,
                fontStyle: 'normal'
              },
              // Font-Face
              {
                src: '@/assets/fonts/font-b-700',
                fontWeight: 700,
                fontStyle: 'normal'
              }
            ]
          }
        ]
    }]

  ]
}

Options

Property Type Description Default
useWorker Boolean If set, the non-preloads (prefetches) are loaded via WebWorker. false
ignoreLighthouse Boolean If set, the non-preloads (prefetches) in Lighthouse are disabled (ignored). false
classPattern Boolean Font css class pattern. [family]_[weight]_[style]
importPathResolve Function Path resolve for font src: url(fontPath) Replace @/ to ~
requirePathResolve Function Path resolve for require(fontPath) no changes
ignoredEffectiveTypes Array List of excluded connection types. []
fonts Array List of included fonts. []
unlockDelay Number Delay in milliseconds for unlock prefetched fonts. 0
prefetchCount Number Defines how many fonts are prefetched at the same time.
Important: Lower than zero, everything is loaded at once. 2

Maximum expression classPattern

[family]_[variant]_[featureSettings]_[stretch]_[weight]_[style]

WebWorker useWorker

Look for compactability at https://github.com/webpack-contrib/worker-loader.

WebWorker is executed with the setting inline to reduce the script loads.

Font

Property Type Description Default
fileExtensions Array Font-Family Name ['woff2', 'woff']
fontFamily String Font-Family Name ['2g', 'slow-2g']
fontFaces Array Font-Faces []

Font-Face

Property Type Description Default
preload Boolean Specifies whether font is loaded as preload. false
local Array List of local font names (System, etc.). []
src Array File Path without extension. null
fontVariant String CSS-Prop. font-variant 'normal'
fontFeatureSettings String CSS-Prop. font-feature-settings 'normal'
fontStretch String CSS-Prop. font-stretch 'normal'
fontWeight Number CSS-Prop. font-weight 'normal'
fontStyle String CSS-Prop. font-style 'normal'
fontDisplay String CSS-Prop. font-display 'swap'

⚠️ The first fileExtensions entry is used as preload.

Usage

On the HTML tag a class is set for each font file. This class then activates the set styles in the CSS.

The name of the font is specified in SnakeCase. (Example: Open Sans -> open_sans)

It is recommended to normalize the used tags.

Example: h1 has font-weight: bold as standard.

p {
  font-family: sans-serif;
}

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

For additional FontFaces, classes switch with the options weight and style.

p {
  font-family: sans-serif;
}

html.font_roboto_400_normal p.bold {
  font-family: 'Roboto', sans-serif;
  font-style: normal;
  font-weight: 400;
}

p.bold {
  font-family: sans-serif;
  font-style: normal;
  font-weight: 700;
}

html.font_roboto_700_normal p.bold {
  font-family: 'Roboto', sans-serif;
}

p.light {
  font-family: sans-serif;
  font-style: normal;
  font-weight: 300;
}

html.font_roboto_300_normal p.light {
  font-family: 'Roboto', sans-serif;
}

p.italic {
  font-family: sans-serif;
  font-style: italic;
  font-weight: 400;
}

html.font_roboto_400_italic p.italic {
  font-family: 'Roboto', sans-serif;
}

Browser Performance

alt text

Preview

Development

  1. Clone this repository
  2. Install dependencies using yarn install or npm install
  3. Start development server using npm run dev

Browser-Support

Preload Fonts

The options preload and prefetch are required for the link tag.

Not all browsers support this:

If not supported, all fonts are activated.

Deactivate fonts at low connection

Connection speed dependent font loading, requires the support of navigator.connection.effectiveType.

Can I use - effectivetype

Download Details:

Author: GrabarzUndPartner

Demo: https://grabarzundpartner.github.io/nuxt-font-loader-strategy/

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

vue vuejs javascript nuxt 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.

How to add Authentication to Nuxt.JS and Vue.JS

This Vue.JS Tutorial shows how to add Authentication and Authorization to your NuxtJS App and make it work with SSR

Snippets And Boiler Plates Built With Nuxtjs And Nuxt/content

Documentation with snippets and boiler plates, built with NuxtJS and nuxt/content. Markdown ❤️ for ever.

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

Modern JavaScript date utility library - date-fns for Nuxt.js

date-fns-module Modern JavaScript date utility library - date-fns for Nuxt.js