Fonts

Theme by Nuxt

|

Updated: 21 May 2025

|

530 Stars

Plug-and-play web font optimization and configuration for Nuxt apps.

Categories

Overview

Nuxt Fonts is a tool for custom web font optimization and configuration for Nuxt apps. It offers zero-configuration setup, support for various font providers, custom font provider options, automatic font metric optimization, and build/dev time font caching.

Features

• Zero-configuration required: Get started with Nuxt Fonts without any setup hassle.
• Built-in providers: Includes providers like Google, Bunny, Fontshare, Fontsource, Adobe, and more.
• Custom providers: Allows users to define custom font providers for full control.
• Local download support: Supports downloading fonts locally until nuxt/assets functionality is available.
• Automatic font metric optimization: Optimizes font metrics using Fontaine and Capsize.
• Build/Dev time font caching: Caches fonts during build and development using unstorage.
• Pluggable and extensible: Designed for flexibility so users can use existing providers or create their own.

Installation

To install Nuxt Fonts, follow these steps:

1. Add Nuxt Fonts to your project:

   npm install nuxt-fonts
   

2. Add .data directory to your .gitignore file:

   echo ".data" >> .gitignore
   

3. Add a font-family declaration in your CSS file:

   body {
       font-family: 'Roboto', sans-serif;
   }
   

Summary

Nuxt Fonts simplifies the process of optimizing and configuring web fonts for Nuxt applications. With features like automatic font metric optimization, built-in and custom font providers, and build-time font caching, it offers a convenient solution for managing web fonts efficiently in Nuxt projects.