Preload custom fonts in Nuxt
npm install nuxt-font-preload[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Nuxt][nuxt-src]][nuxt-href]
Minimize Content Layout Shifts (CLS) by preloading fonts. A developer-focused tool for font preloading, nuxt-font-preload will automatically generates tags and @font-face declarations for your custom fonts.
> [!NOTE]
> This module is intended for use with self-hosted fonts, and does not support Google Fonts or other external font providers.
- ✨ Release Notes
- 🏀 Online playground
- 💡 Declares custom fonts using @font-face
- ✋ Reduces CLS by preloading fonts
- ✨ Easy integration with Nuxt 3
1. Add nuxt-font-preload dependency to your project
``bash`
npm i -D nuxt-font-preload
2. Add nuxt-font-preload to the modules section of nuxt.config.ts
`js
export default defineNuxtConfig({
modules: ["nuxt-font-preload"],
fontPreload: {
fonts: [
{
fontFamily: "Montserrat",
weights: [
{
weight: 400,
sources: [
{
url: "fonts/Montserrat-Regular.woff2",
format: "woff2",
preload: true,
},
],
},
],
// Applies to all weights
defaultOptions: { fontDisplay: "swap" },
},
],
},
});
`
That's it! Your Nuxt app will now preload fonts efficiently ✨
You can contribute to this module and test it locally by following these steps:
1. Clone this repository
2. Install dependencies using pnpm installpnpm dev:prepare
3. Prepare development server using pnpm prepack
4. Build module using pnpm dev`
5. Launch playground using
[npm-version-src]: https://img.shields.io/npm/v/nuxt-font-preload/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-font-preload
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-font-preload.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-font-preload
[license-src]: https://img.shields.io/npm/l/nuxt-font-preload.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-font-preload
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com