TypeSnap

Zero-config font optimisation. Scan, detect, and generate preload tags and metric-matched fallback stacks automatically.

Get Started/Contact

Why TypeSnap

Fonts are the single most common source of layout shift. We solve this at the source.

1. Preload Tags

TypeSnap generates <link rel="preload"> tags in your head, ensuring fonts fetch with priority.

2. font-display: swap

We inject font-display: swap rules to ensure text remains visible during font loading.

3. Metric Matching

Our engine generates size-adjusted fallback stacks that mirror your primary font's metrics, eliminating CLS.

Quick Start

bash

# Install as a dev dependency
npm install -D typesnap

# Run a scan and generate report
npx typesnap generate

# Inject the preloads into your HTML
npx typesnap inject public/index.html

Walkthrough

Run npx typesnap generate to detect all fonts across your project.

Detect all fonts across CSS, HTML, JS, and Tailwind.
Write typesnap-fallbacks.css with metric overrides.
Write typesnap-preloads.html with preload tags.

Integration

css

@import "./typesnap-fallbacks.css";

css

font-family: "Inter", "Inter Fallback", sans-serif;

Agents

Copy this prompt and paste it into your AI assistant (Cursor, Claude, GPT) to correctly integrate TypeSnap into any project.

prompt

You are an expert web performance agent. Please integrate TypeSnap into this project to eliminate font-induced CLS.

Follow these exact steps:
1. Run "npm install -D typesnap" to install the library.
2. Execute "npx typesnap generate" to scan the project and generate font metrics.
3. Locate the generated "public/typesnap-fallbacks.css" and import it into the global stylesheet.
4. For every font-family declaration in the CSS, append the matching fallback family.
5. Inject the generated preloads from "public/typesnap-preloads.html" into the root HTML/Layout file.
6. Run "npx typesnap lint" to verify the setup and ensure 0 CLS risk.

How It Works

Detection

File type	What it looks for
.css, .scss, .pcss	@import URL, @font-face blocks, and display params.
.html, .vue, .astro	Stylesheet links, preloads, and embedded styles.
.js, .ts, .tsx	next/font imports and URL literals.

Generation

css

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.64%;
}

CLI Reference

typesnap scan

Audit fonts and print a report.

typesnap generate

Write fallback CSS and preloads to disk.

typesnap inject [files...]

Inject preloads directly into HTML files.

typesnap lint

Exit non-zero when font issues exceed a threshold.

Build Plugins

Vite

import { typeSnapPlugin } from 'typesnap/vite';

Next.js

const { withTypeSnap } = require('typesnap/next');

Roadmap

• Vite & Next.js build plugins (Shipped).

• Astro, SvelteKit, Nuxt adapters.

• Cloud-based metric analysis engine.

• VS Code extension for inline warnings.