Nuxt Font Metrics
Font metric override implementation for Nuxt 3
Features
nuxt-font-metrics is under active development.
-
💪 Reduces CLS by using local font fallbacks with crafted font metrics. -
✨ Generates font metrics and overrides automatically. -
⚡️ Pure CSS, zero runtime overhead.
On the playground project, enabling/disabling this module makes the following differences rendering /, with no customisation required:
| Before | After | |
|---|---|---|
| CLS | 0.34 |
0.013 |
| Performance | 88 |
98 |
What's next
For best performance, you will need to inline all your CSS, not just the font-face override rules (which this module does automatically), or there will still be a layout shift when the stylesheet loads (which is why the number above is not zero).
This PR aims to bring that ability to Nuxt itself.
Installation
With pnpm
pnpm add -D nuxt-font-metrics
Or, with npm
npm install -D nuxt-font-metrics
Or, with yarn
yarn add -D nuxt-font-metrics
Usage
import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
modules: ['nuxt-font-metrics'],
// If you are using a Google font or you don't have a @font-face declaration
// for a font you're using, you can declare them here.
//
// In most cases this is not necessary.
//
// fontMetrics: {
// fonts: ['Inter', { family: 'Some Custom Font', src: '/path/to/custom/font.woff2' }],
// },
})
That's it!
How it works
Nuxt will scan your @font-face rules and generate fallback rules with the correct metrics. For example:
@font-face {
font-family: 'Roboto';
font-display: swap;
src: url('/fonts/Roboto.woff2') format('woff2'), url('/fonts/Roboto.woff') format('woff');
font-weight: 700;
}
/* This will be generated. */
@font-face {
font-family: 'Roboto override';
src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Helvetica Neue'),
local('Arial'), local('Noto Sans');
ascent-override: 92.7734375%;
descent-override: 24.4140625%;
line-gap-override: 0%;
}
Then, whenever you use font-family: 'Roboto', Nuxt will add the override to the font-family:
:root {
font-family: 'Roboto';
/* This becomes */
font-family: 'Roboto', 'Roboto override';
}
Using outside of Nuxt
The core of this module will work outside of Nuxt, and has been separated into a separate library: fontaine. Check it out!
💻
Development
- Clone this repository
- Enable Corepack using
corepack enable(usenpm i -g corepackfor Node.js < 16.10) - Install dependencies using
pnpm install - Stub module with
pnpm dev:prepare - Run
pnpm devto start playground in development mode
Credits
This would not have been possible without:
- amazing tooling and generated metrics from capsizecss
- suggestion and algorithm from Katie Hempenius & Kara Erickson on the Google Aurora team - see notes on calculating font metric overrides.
License
Made with
Published under the MIT License.
4.6k Dec 30, 2022
883 Dec 15, 2022
19 Aug 17, 2021
136 Dec 31, 2022
2 Apr 18, 2022
5 Sep 28, 2022
70.7k Jan 3, 2023
9 Dec 12, 2022
24 Jan 6, 2023
2 Feb 9, 2021
410 Dec 10, 2022
56 Dec 26, 2022
6 Mar 28, 2022
30 Jan 6, 2023
32 Dec 25, 2022
10 Nov 30, 2022
7.9k Dec 28, 2022
4 Jun 3, 2021
2 Sep 15, 2022
6 Nov 24, 2022