$ show unjs/fontaine
This monorepo provides two packages for font optimization in web applications. `fontaine` is a library that automatically generates metric-adjusted CSS `@font-face` fallback rules to reduce Cumulative Layout Shift (CLS). It parses CSS, reads font metrics from files or URLs, and injects override rules with proper `size-adjust`, `ascent-override`, etc. `fontless` is a Vite plugin that builds on top of fontaine and integrates with multiple font providers (Google Fonts, Bunny, FontSource, npm, etc.) to automatically download, subset, and serve optimized fonts with zero runtime JavaScript. It scans CSS for `font-family` declarations, resolves fonts through a provider chain, downloads the actual font files, emits them as build assets, and injects both the primary `@font-face` rules and metric-override fallback families. The codebase is well-structured, has comprehensive test coverage, and follows modern JavaScript/TypeScript practices. It is a hybrid of a library (fontaine) and an application plugin (fontless) but primarily serves as a developer tool for building optimized web fonts.
The LLM identified 5 files worth highlighting for reuse:
Provides utilities for parsing CSS `@font-face` rules using css-tree, extracting font families and sources, and generating fallback `@font-face` declarations with metric overrides (size-adjust, ascent-override, etc.). The `parseFontFace` function correctly handles multiple src URLs, font properties, and generic families. `generateFontFace` computes override values from font metrics using the capsize algorithm. This module is self-contained with no internal dependencies and could be extracted as a standalone CSS font metric library.
Implements category-aware fallback font resolution. Exports `DEFAULT_CATEGORY_FALLBACKS` (presets for serif, sans-serif, monospace, display, handwriting) and `resolveCategoryFallbacks` which selects fallbacks based on a priority: global array, per-family object, font category from metrics, or sans-serif default. This logic is cleanly separated from the rest of fontaine and could be reused in any project that needs to pick system font fallbacks based on a font's category.
Provides CSS parsing utilities for extracting font family names from declarations, including handling of multi-word unquoted families, CSS variables, and generic families. The `extractFontFamilies` function correctly tokenizes values with css-tree and handles various edge cases. `addLocalFontFallbacks` prepends local() sources to font face data based on weight and style, which is a common pattern for font loading. These functions are isolated and could be reused in other CSS processing tools.
Renders `@font-face` CSS declarations from normalized font data, generating both the primary face and metric-override fallback faces. `generateFontFace` produces a complete CSS string with all descriptors. `generateFontFallbacks` uses fontaine's metric functions to compute fallback faces for each fallback font family. It also handles provider-reported metrics to fill gaps when the database doesn't have the font. The `parseFont` utility converts URL strings to font source objects. This module could be extracted as a standalone CSS font generation library.
Provides the `transformCSS` function which is the core of the Vite plugin's CSS transformation. It parses CSS, walks all declarations, identifies font families (including CSS variables depending on config), resolves font faces via a callback, generates `@font-face` rules and fallback metric faces, and inserts them into the stylesheet. It handles `@charset`, `@import`, `@namespace`, `@layer`, and nested CSS. It also manages preload font registration. This function is the main orchestrator and could be reused as a standalone CSS transformer for font injection.