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-facedefinitions 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
- Add
nuxt-font-loader-strategydependency to your project
- Add
nuxt-font-loader-strategyto themodulessection ofnuxt.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 fileExtensionsentry is used aspreload.
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.
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.
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
Preview
Development
- Clone this repository
- Install dependencies using
yarn installornpm 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.