Welcome to fontless

Magical Font Optimization for Modern Web Apps
Effortlessly optimize web fonts with fontless. Zero-runtime CSS solution for Google Fonts, Bunny Fonts, and more. Reduce CLS and boost performance.

Optimized font loading

Automatically loads and configures fonts with proper fallbacks.

Multiple provider support

Google Fonts, Bunny Fonts, FontShare, FontSource, npm packages, and more using unifont.

Zero runtime overhead

Pure CSS solution with no JavaScript required at runtime.

Metric-based fallbacks

Reduces Cumulative Layout Shift (CLS) by using font metrics from fontaine.

CSS transformation

Detects font-family usage in your CSS and injects optimized @font-face declarations.

Framework agnostic

Works with all modern frameworks (Vue, React, Solid, Svelte, Qwik, etc.).

Installation

# npm
npm install fontless

# pnpm
pnpm install fontless

Usage

Add the fontless plugin to your Vite configuration:

// vite.config.js / vite.config.ts
import { defineConfig } from 'vite'
import { fontless } from 'fontless'

export default defineConfig({
  plugins: [
    // ... other plugins
    fontless()
  ],
})

Using fonts in your CSS

Simply use fonts in your CSS as you normally would, and fontless will handle optimization:

/* Your CSS */
.google-font {
  font-family: "Poppins", sans-serif;
}

.bunny-font {
  font-family: "Aclonica", sans-serif;
}

Configuration

You can customize fontless with various options:

fontless({
  // Configure available providers
  providers: {
    google: true,          // Google Fonts
    bunny: true,           // Bunny Fonts
    fontshare: true,       // FontShare
    fontsource: true,      // FontSource
    npm: true,             // npm packages (@fontsource/*, etc.)
    // Disable a provider
    adobe: false
  },

  // Provider priority order
  priority: ['google', 'bunny', 'fontshare'],

  // Default font settings
  defaults: {
    preload: true,
    weights: [400, 700],
    styles: ['normal', 'italic'],
    fallbacks: {
      'sans-serif': ['Arial', 'Helvetica Neue']
    }
  },

  // Custom font family configurations
  families: [
    // Configure a specific font
    {
      name: 'Poppins',
      provider: 'google',
      weights: [300, 400, 600]
    },
    // Manual font configuration
    {
      name: 'CustomFont',
      src: [{ url: '/fonts/custom-font.woff2', format: 'woff2' }],
      weight: [400]
    }
  ],

  // Asset configuration
  assets: {
    prefix: '/_fonts'
  },

  // Experimental features
  experimental: {
    disableLocalFallbacks: false
  }
})

The npm provider resolves fonts from locally installed npm packages such as @fontsource/*, @fontsource-variable/*, and cal-sans. It is enabled by default with remote: false, meaning it only reads from your local node_modules without making any network requests.

Basic usage

Install a font package and use it in your CSS:

pnpm install @fontsource/inter

.my-text {
  font-family: "Inter", sans-serif;
}

The npm provider will automatically detect the installed @fontsource/inter package and resolve the font from node_modules.

Configuration

fontless({
  // npm provider options
  npm: {
    // Only resolve from local node_modules (default: false)
    remote: false,
    // Enable CDN fallback when local resolution fails
    // remote: true,
  },
})

You can also specify npm-specific options per font family:

fontless({
  families: [
    {
      name: 'Inter',
      provider: 'npm',
      providerOptions: {
        npm: {
          package: '@fontsource/inter',
          file: 'index.css',
        },
      },
    },
  ],
})

How It Works

Fontless works by:

Scanning your CSS files for font-family declarations.
Resolving fonts through various providers (Google, Bunny, etc.).
Generating optimized @font-face declarations with proper metrics.
Adding fallback fonts with correct metric overrides to reduce CLS.
Automatically downloading and managing font assets.

💻 Development

Clone this repository
Enable Corepack using corepack enable
Install dependencies using pnpm install
Run interactive tests using pnpm dev

License

Made with ❤️

Published under MIT License.