Inter Font on the Web: A Complete Guide

Why Inter Became the Default Sans-Serif

Inter did not become ubiquitous by accident. Rasmus Andersson designed it specifically for computer screens, spending years refining letter spacing, x-height, and optical sizing so the face would hold up at 13px UI labels and 72px hero text alike. That single-minded focus on digital reading is the reason it spread from Linear to GitHub to half the design systems on the internet.

In 2026 it is still the first font most developers reach for. The real question is whether you are using it well or just cargo-culting a stylesheet you copied three years ago.

Loading Inter Without Paying a Performance Tax

The biggest mistake teams make is loading the full font family: all weights, both italics, every script range. A naive Google Fonts embed of Inter can push past 400 KB of font data before a single byte of content loads.

Do these three things instead.

First, use the variable font. Inter ships as a single variable file (Inter-roman.var.woff2 for upright, a separate file for italic) that covers the entire weight axis from 100 to 900. One request replaces seven or eight static files. The woff2 variable file for Latin comes in around 100 KB, which is a meaningful saving.

Second, subset aggressively. If your app is English-only, strip Cyrillic, Greek, and Vietnamese. Tools like pyftsubset or the subsetting options in fontcompressor can cut that 100 KB down to 40-60 KB without any visible quality change.

Third, use font-display: swap for body text and font-display: optional for decorative or hero uses where a flash of the fallback font is more disruptive than a skip. There is no universal right answer here. It depends on how fast your server is and how jarring your fallback looks next to Inter.

@font-face {
 font-family: 'Inter';
 src: url('/fonts/Inter-roman.var.woff2') format('woff2-variations');
 font-weight: 100 900;
 font-display: swap;
 font-style: normal;
}

Self-hosting beats a CDN for most production apps. You control cache headers, you avoid a third-party DNS lookup on the critical path, and you can serve the exact subset you need.

Variable Font Axes Worth Knowing

Inter's variable version exposes a weight axis (wght) and, in the newer Inter Variable releases, an optical size axis (opsz). The optical size axis is underused.

At small sizes (below 16px) Inter tightens spacing and opens counters automatically when font-optical-sizing: auto is set, or when you dial the opsz axis manually. At display sizes it opens up tracking and adjusts contrast. This is not a subtle difference at the extremes.

/* Let the browser handle it automatically */
body {
 font-optical-sizing: auto;
}

/* Or control it manually on a specific element */
.display-heading {
 font-variation-settings: 'opsz' 32, 'wght' 700;
}

Browsers that do not support variable fonts at all are under 2% of traffic as of 2026. You do not need a static font fallback unless you have a specific legacy requirement.

Pairing and Hierarchy Without a Second Typeface

One underappreciated quality of Inter is that you can build a full typographic hierarchy using weight alone. A 400-weight body, 600-weight subheadings, and 700-weight display text with adjusted tracking looks clean and intentional without reaching for a second face.

Where Inter struggles is long-form reading above roughly 600 words. The tight spacing and neutral letterforms that make it great for UI labels create a sameness that fatigues readers in editorial contexts. For a documentation site, a product changelog, or a blog (including this one), pairing Inter for navigation and UI with a serif or a humanist sans for body text usually reads better.

That said, if you are building a data-dense dashboard, a SaaS app, or a developer tool, Inter alone is the right call. It is designed for exactly that context.

Common Rendering Problems and Fixes

Windows renders Inter at small sizes without subpixel antialiasing in some configurations, which can look slightly heavy compared to macOS. Adding -webkit-font-smoothing: antialiased and font-smooth: always on macOS is common, but apply it to specific elements rather than globally. The global * { -webkit-font-smoothing: antialiased } trick thins out Inter on macOS to the point where bold weights look medium.

Another issue: line-height. Inter's default metrics result in a tighter line-height than most designers expect. Setting line-height: 1.5 on body text and line-height: 1.2 on headings is a reasonable starting point, but you will want to fine-tune based on measure (line length). A 90-character measure needs more leading than a 65-character one.

When to Skip Inter

Inter is a neutral workhorse. That neutrality is also its weakness. If your brand has a strong personality, Inter will sand it down. A fintech dashboard benefits from neutrality. A creative agency site probably does not.

Also worth considering: several large platforms have moved away from Inter toward custom or semi-custom typefaces precisely because Inter is everywhere. If differentiation matters to your brand, using the most common developer font on the web is a conscious trade-off.

Practical Checklist

Here is a quick at-a-glance rundown before you ship:

• Use the variable woff2, not static weight files
• Subset to your actual character set
• Enable font-optical-sizing: auto or set opsz manually
• Set font-display intentionally, not by default
• Adjust line-height per context, do not inherit a global value
• Test Windows rendering at 13-14px if you have UI labels at that size
• Decide upfront whether you need a second typeface for long-form content

Inter rewards developers who go deeper than a stylesheet import. The defaults are good. The intentional choices are better.