nuxt-font-loader-strategy

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

[![Grabarz & Partner - Module][grabarz-partner-module-src]][grabarz-partner-href]

[![Main][github-workflow-main-src]][github-workflow-main-href]

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Renovate - Status][renovate-status-src]][renovate-status-href]
[![License][license-src]][license-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

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

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

2. Add nuxt-font-loader-strategy to the modules section of nuxt.config.js

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

$3

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

$3

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

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

$3

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

$3

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


`css
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.

`CSS
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][performance-image]

Preview

- Preview
- Report Client
- Report Modern
- Report Server

Development

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

Browser-Support

$3

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

Not all browsers support this:
- Can I use - link-rel-preload
- Can I use - link-rel-prefetch

If not supported, all fonts are activated.

$3

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

Can I use - effectivetype

License

MIT License

[grabarz-partner-module-src]:
[grabarz-partner-href]:

[renovate-status-src]:
[renovate-status-href]:

[github-workflow-main-src]:
[github-workflow-main-href]:

[npm-version-src]: https://img.shields.io/npm/v/nuxt-font-loader-strategy/latest.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/nuxt-font-loader-strategy

[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-font-loader-strategy.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/nuxt-font-loader-strategy

[codecov-src]: https://img.shields.io/codecov/c/github/GrabarzUndPartner/nuxt-font-loader-strategy/branch/main/graph/badge.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/GrabarzUndPartner/nuxt-font-loader-strategy

[license-src]: https://img.shields.io/npm/l/nuxt-font-loader-strategy.svg?style=flat-square
[license-href]: https://npmjs.com/package/nuxt-font-loader-strategy

[performance-image]: ./example/static/performance.jpg