Font Subsetting for Next.js and Vite — Faster Fonts Without the CLI
- Next.js and Vite both support self-hosted fonts via a simple public/ folder + CSS setup
- Subset your custom font in the browser before adding it to your project
- Basic Latin subset cuts most custom font files by 80–90% before it hits your bundle
- Pair with font-display: swap to eliminate render-blocking and improve LCP
Table of Contents
Next.js has built-in font optimization for Google Fonts, but for custom or purchased typefaces, the recommended approach is still to self-host the file and serve it via @font-face. The faster path to doing this well is to subset the font before it enters your project at all — before the file lands in your public/ folder or assets/ directory. A 300 KB raw font file that becomes 35 KB after subsetting is 35 KB that your users never have to wait for.
Why Custom Fonts Need Manual Optimization in Next.js and Vite
The next/font module automatically handles Google Fonts: it downloads, subsets, and serves them from the same domain as your app, eliminating the Google CDN dependency. But if you have a custom or licensed font that is not on Google Fonts, you are on your own — Next.js does not subset arbitrary font files automatically.
In Vite projects, the situation is similar: custom fonts go into the public/ folder or are imported via CSS, and whatever file you put there is served as-is. Neither framework will strip glyphs for you. That optimization is your responsibility — and it is worth doing before the file hits your repo.
Step 1 — Subset First, Then Add to Your Project
Open the Font Subsetter and upload your font file. Choose Basic Latin if your project is English-only — this covers A–Z, a–z, 0–9, and common punctuation in around 95 characters. Choose Extended Latin if your content includes accented characters. Download the subsetted file.
Give the file a clear name that signals it is a subset — for example, inter-subset.ttf or inter-latin.woff. This makes it obvious to future maintainers why the file is different from a stock download.
Step 2 — Place the File and Wire Up @font-face
In Next.js, place the subsetted font in /public/fonts/. In Vite, place it in /public/fonts/ or /src/assets/fonts/ depending on your project structure. Then reference it in your global CSS:
@font-face {
font-family: 'MyFont';
src: url('/fonts/my-font-subset.woff') format('woff');
font-display: swap;
unicode-range: U+0020-007E;
}The font-display: swap tells the browser to render text in a fallback font immediately, then swap to your custom font when it loads — eliminating invisible text during load. The unicode-range descriptor tells the browser this font file only covers Basic Latin, so it does not attempt to use it for other character ranges.
Step 3 — Measure Before and After
Run Lighthouse or check the Network tab in your browser's developer tools after deploying. Compare the font transfer size before and after — it should show the subsetted file size, not the original. Also check that text renders correctly on every page that uses the font: look for any character that appears in a different typeface.
The Font Previewer can help during development: upload the subsetted file and preview it with custom text matching what appears in your headings and body copy. If every character renders correctly in the tool, it will render correctly on your site.
When next/font Already Does This For You
If you are using Next.js 13+ and the font is available on Google Fonts, use next/font/google instead of the manual approach. It handles subsetting, self-hosting, and the @font-face declaration automatically, and it serves the font from the same domain as your app to avoid the Google CDN connection cost.
The manual subsetting workflow described here is specifically for fonts that are not on Google Fonts — custom type, purchased commercial fonts, or fonts from other foundries.
Subset Your Font Before It Hits Your Project
Upload a TTF, OTF, or WOFF and download a smaller file in seconds. No Node.js, no CLI, no account needed.
Open Font Subsetter FreeFrequently Asked Questions
Does Vite automatically optimize fonts?
Vite does not subset fonts automatically. It serves whatever file you reference in your CSS. Subsetting the file before adding it to your project is the correct approach.
Should I use font-display: swap or optional?
font-display: swap shows a fallback font immediately and swaps when the custom font loads — good for body text. font-display: optional skips the custom font if it is not already cached — good for non-critical display fonts where layout shift matters.
Can I subset a font that is already in my project?
Yes. Grab the font file from your public/ or assets/ directory, upload it to the subsetter, download the smaller version, and replace the original. Update the file path in your CSS only if the filename changed.
