nuxt-font-loader-strategy

This project is no longer maintained, because the concept is not suitable for global management of many fonts in larger projects. For this reason we have developed a new concept that guarantees smart, efficient and performant component-based font management even in larger websites. Please visit: https://github.com/GrabarzUndPartner/nuxt-speedkit

[][renovate-status-href]

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.

📖 Release Notes

Setup

Add nuxt-font-loader-strategy dependency to your project

yarn add nuxt-font-loader-strategy # or npm install nuxt-font-loader-strategy

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

Clone this repository
Install dependencies using yarn install or npm install
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

License

MIT License

[renovate-status-href]: https://renovate.whitesourcesoftware.com