Skip to content
Helps to load fonts and activate them by preloading.
JavaScript Vue CSS
Branch: master
Clone or download

Latest commit

ThornWalli Merge pull request #3 from GrabarzUndPartner/feature/vscode
chore(vscode): add extensions & fix pcss
Latest commit 9b8467e Mar 1, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode feat(initial): Initial Commit Feb 20, 2020
example feat(initial): Initial Commit Feb 20, 2020
lib fix(file-ext): added default file extensions Feb 20, 2020
test feat(initial): Initial Commit Feb 20, 2020
.branchlintrc feat(initial): Initial Commit Feb 20, 2020
.editorconfig feat(initial): Initial Commit Feb 20, 2020
.eslintignore
.eslintrc.js fix(travis-eslint): fix build task and update eslint plugins Feb 22, 2020
.gitignore feat(initial): Initial Commit Feb 20, 2020
.npmignore feat(initial): Initial Commit Feb 20, 2020
.nvmrc chore(deps): update node.js to v12.16.1 Feb 22, 2020
.releaserc feat(initial): Initial Commit Feb 20, 2020
.stylelintignore feat(initial): Initial Commit Feb 20, 2020
.stylelintrc feat(initial): Initial Commit Feb 20, 2020
.travis.yml fix(travis-eslint): fix build task and update eslint plugins Feb 22, 2020
CHANGELOG.md chore(release): 1.0.0 [skip ci] Feb 22, 2020
LICENSE feat(initial): Initial Commit Feb 20, 2020
README.md feat(initial): Initial Commit Feb 20, 2020
babel.config.js feat(initial): Initial Commit Feb 20, 2020
commitlint.config.js feat(initial): Initial Commit Feb 20, 2020
husky.config.js feat(initial): Initial Commit Feb 20, 2020
jest.config.js feat(initial): Initial Commit Feb 20, 2020
jsconfig.json feat(initial): Initial Commit Feb 20, 2020
nuxt-font-loader-strategy.code-workspace chore(vscode): add extensions & fix pcss Mar 1, 2020
package-lock.json chore(release): 1.0.0 [skip ci] Feb 22, 2020
package.json
renovate.json feat(initial): Initial Commit Feb 20, 2020

README.md

nuxt-font-loader-strategy

Build Status npm version npm downloads License

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
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', { 
        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 are loaded via WebWorker. 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

License

MIT License

You can’t perform that action at this time.