⚠️ 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
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.
- Add
nuxt-font-loader-strategydependency to your project
yarn add nuxt-font-loader-strategy # or npm install nuxt-font-loader-strategy- 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' } ] } ] }] ] }| 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 |
[family]_[variant]_[featureSettings]_[stretch]_[weight]_[style]
Look for compactability at https://github.com/webpack-contrib/worker-loader.
WebWorker is executed with the setting inline to reduce the script loads.
| Property | Type | Description | Default |
|---|---|---|---|
fileExtensions | Array | Font-Family Name | ['woff2', 'woff'] |
fontFamily | String | Font-Family Name | ['2g', 'slow-2g'] |
fontFaces | Array | Font-Faces | [] |
| 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 firstfileExtensionsentry is used aspreload.
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; }
- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
The options preload and prefetch are required for the link tag.
Not all browsers support this:
If not supported, all fonts are activated.
Connection speed dependent font loading, requires the support of navigator.connection.effectiveType.