TL;DR
Loading fonts from Google Fonts via <link> in <head> in 2026 is an automatic performance regression, extra DNS lookup, render-blocking CSS, and CLS when text "jumps" after weight 600 loads. next/font self-hosts files in the bundle, sets font-display: swap, and generates CSS variables, no request to fonts.googleapis.com. Subsetting to latin + latin-ext (Polish ą, ę, ł and German umlauts) cuts 60–80% of file size vs full unicode. Space reservation via size-adjust or fixed hero line-height prevents layout shift. Hosting on DevStudioIT Cloud serves fonts from the same origin as HTML, one TLS handshake, long-term cache after build.
Who is this for
- Corporate sites with custom Figma typography, dev must match without hurting LCP
- Next.js teams seeing CLS 0.15+ in Lighthouse despite optimized images
- Multilingual PL/DE projects with latin-ext, full charset without unused CJK glyphs
- Designers picking 4 font weights "because it looks good", KB budget needs justification
- Anyone after a CWV audit where "font loading" appears in diagnostics
Keyword
next/font subsetting, web fonts performance, cls fonts nextjs, font-display swap, corporate site typography, google fonts self hosting 2026
The problem: external fonts and Core Web Vitals
Classic import:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">Request chain:
| Step | Delay | Impact |
|---|---|---|
| DNS fonts.googleapis.com | 20–80 ms | After HTML TTFB |
| CSS font-face | blocking or FOIT | Delayed first text |
| DNS fonts.gstatic.com | another RTT | Worse LCP when text is LCP |
| Download .woff2 400 + 600 + 700 | 150–400 KB | Main thread decode |
CLS happens when fallback (Arial) metrics differ from Inter, hero heading height changes 4–12 px after swap.
next/font, self-hosting in Next.js App Router
// app/fonts.ts
import { Inter } from 'next/font/google';
export const inter = Inter({
subsets: ['latin', 'latin-ext'],
weight: ['400', '600'],
display: 'swap',
variable: '--font-inter',
preload: true,
adjustFontFallback: true,
});Layout:
import { inter } from './fonts';
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.variable}>
<body className="font-sans antialiased">{children}</body>
</html>
);
}Tailwind (tailwind.config.ts):
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)', 'system-ui', 'sans-serif'],
},
},
},| Option | Effect |
|---|---|
subsets: ['latin-ext'] |
Polish and German diacritics |
weight: ['400','600'] |
Only used weights, each weight = separate file |
adjustFontFallback: true |
Automatic size-adjust on fallback |
variable |
One CSS class, no scattered @font-face |
Subsetting, what to include, what to skip
| Subset | When | Approx Inter 400 size |
|---|---|---|
latin |
EN-only landing | ~15 KB woff2 |
latin-ext |
PL, DE, CS, RO | +8–12 KB |
cyrillic |
UA/RU market | +20 KB, only if locale |
| Full unicode | ❌ avoid | 200 KB+ |
For DevStudio.it (pl/en/de) ['latin', 'latin-ext'] is enough. Do not import vietnamese "just in case".
Licensed brand font (OTF):
import localFont from 'next/font/local';
export const brandSans = localFont({
src: [
{ path: '../public/fonts/Brand-Regular.woff2', weight: '400' },
{ path: '../public/fonts/Brand-SemiBold.woff2', weight: '600' },
],
display: 'swap',
variable: '--font-brand',
});Convert OTF → woff2: fonttools or CI pipeline before commit.
CLS, space reservation beyond next/font
adjustFontFallback helps, but hero with large text-5xl and custom line-height can still shift:
.hero-title {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.15;
min-height: 2.3em; /* reserve for 2 lines */
}| Technique | CLS | Notes |
|---|---|---|
font-display: optional |
Lowest | Risk of no custom font on slow network |
swap + size-adjust |
Low | B2B recommendation |
| Preload only critical weight | Better LCP | preload: true in next/font by default |
| System font stack on mobile | Zero CLS | Brand vs metrics tradeoff |
Test mobile 4G throttling in Lighthouse, desktop hides the problem.
Typography and LCP, when LCP is text
On pages with minimal hero the LCP element may be H1 heading, not an image. Then:
- Preload only weight used in H1 (400 or 600)
- Avoid
@importfonts in CSS modules, loads late - Server Component for hero, HTML with font in first stream bytes
Font should not live in a lazy-loaded Client Component, that delays text LCP.
Multiple fonts, heading + body without KB explosion
| Pattern | woff2 files | Recommendation |
|---|---|---|
| 1 family, 2 weights | 2 × ~20 KB | ✅ default choice |
| Body + display (2 families) | 4 files | OK if display only H1–H2 |
| 4 weights + 2 families | 8+ files | Review in performance budget |
Display font on headings via next/font with preload: false if H1 is below fold on mobile, controversial; better to shrink display subset.
Monitoring after deploy on DevStudioIT Cloud
After deploy compare:
| Source | Font-related metric |
|---|---|
| Lighthouse CI | CLS, LCP, "Font display" audit |
| CrUX / Search Console | Field CLS after 28 days |
| Web Vitals RUM | layout-shift attributions |
Regression: designer added weight 700 and italic "for quotes", bundle +40 KB, CLS +0.05. Performance budget in CI should catch via overall score; assert CLS directly.
Design → dev handoff, Figma typography without surprises
Before the developer implements fonts from mockups, agree on a decision table:
| Figma element | Next.js implementation | Question for design |
|---|---|---|
| Inter 400 body | next/font weight 400 |
Is it enough? |
| Inter 600 headings | weight 600 | Is 700 necessary? |
| Inter 700 CTA | Separate woff2 file | Is 600 enough on button? |
| Italic quotes | +italic file | System <em> instead? |
Figma design tokens should map 1:1 to Tailwind fontFamily, avoid "Satoshi in Figma, Arial in production because of licensing." If brand font needs web license, woff2 in repo before sprint start, not on go-live eve.
Transfer Figma line-height (e.g. 120%) to CSS with min-height reserve for multi-line H1, Figma does not measure CLS.
Typography and accessibility, not just KB
| Requirement | Minimum | Font impact |
|---|---|---|
| WCAG AA contrast | 4.5:1 body, 3:1 large text | Avoid weight 300 on light background |
prefers-reduced-motion |
No text animation | Do not animate font-weight |
| 200% zoom | Readable without horizontal scroll | rem instead of fixed px on font-size |
Custom font does not excuse low contrast, pick weight 500/600 instead of 300 on gray background.
FAQ
next/font google vs self-host files in public/?
next/font/google downloads at build and self-hosts, equivalent to manual public/, but with automatic hash in filename and zero CORS config. Manual public/ only for non-Google fonts (brand OTF).
Are variable fonts (.woff2 variable) always smaller?
Often yes with 3+ weights, one file instead of three. Not every family has a well-hinted variable version; test size and render on Windows.
Third-party CDN fonts (Adobe Fonts, Fontshare)?
Each external origin means separate DNS + cache. For CWV self-host after licensing. Adobe Fonts on marketing pages with strict LCP budget, risky.
Inter vs system-ui, when to drop custom?
Ads landing with LCP > 3 s on mobile, test variant with system-ui. If conversion is unchanged, keep system stack.
Want typography without CLS regression?
- Contact us, we pick font stack, next/font, and Lighthouse CI thresholds
- Performance budget CWV, enforce CLS in PRs
- Next.js image optimization, when LCP is hero image, not font
About the author
We build fast websites, web/mobile apps, AI chatbots and hosting setups — with a focus on SEO and conversion.
Recommended links
From theory to production — Branchly, our hosting stack and shipped work.