Inter Font Stack with Fallbacks

Inter Font Stack

Inter is a free, open-source typeface designed by Rasmus Andersson specifically for computer screens. It has become the de facto standard for modern web UI, used by companies like GitHub (for Primer), Vercel, Linear, and Stripe.

The Declaration

font-family: "Inter", "Inter Fallback", -apple-system,
  BlinkMacSystemFont, "Segoe UI", Roboto,
  "Helvetica Neue", Arial, sans-serif;

The "Inter Fallback" Trick

To prevent Cumulative Layout Shift (CLS) while Inter loads, define a local fallback with adjusted metrics:

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
  size-adjust: 107.64%;
}

This makes Arial behave metrically like Inter, so text blocks maintain the same height before and after the web font loads.

Next.js Integration

Next.js makes Inter integration seamless:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  fallback: ['-apple-system', 'BlinkMacSystemFont',
    '"Segoe UI"', 'Roboto', 'Arial', 'sans-serif'],
});

Next.js automatically generates the @font-face with optimised size-adjust and metric overrides for the fallback fonts.

Key Features of Inter

• Variable font: Weights 100-900 in a single file (~300KB)
• Optical sizing: Tighter tracking at larger sizes, more open at small sizes
• Tabular figures: font-variant-numeric: tabular-nums; for aligned numbers
• Slashed zero: font-feature-settings: "zero"; to distinguish 0 from O
• Case-sensitive forms: font-feature-settings: "case"; for punctuation alignment with uppercase text

Performance Tips

1. Subset the font to Latin characters if you don't need CJK support
2. Use font-display: swap to show fallback text immediately
3. Preload the WOFF2 file for critical text
4. Consider the variable font over individual weight files