Sift

Inter

by Rasmus Andersson ★★★★★ Sans-serif Variable Font
Optimize Now

Quick Answer

Inter is a variable sans-serif font with 3 adjustable axes (Weight, Slant, Optical Size). The modern UI font designed for computer screens. Variable font with weight, slant, and optical size axes.

Performance Impact

94%
Size Reduction
300 KB → 18 KB
-450ms
LCP Improvement
Core Web Vitals boost
14ms
4G Transfer Time
After optimization
100ms
Max Render Block
With font-display: swap

Download Time by Network

Slow 3G (400 Kbps) 360ms
vs ~6000ms unoptimized
Fast 3G (1.5 Mbps) 96ms
vs ~1600ms unoptimized
4G LTE (10 Mbps) 14ms
vs ~240ms unoptimized

Optimization reduces Inter from 300 KB to 18 KB — making your site faster on every device.

Try Inter

Live Preview

Variable Axes
400
100 900
0°
-10 0
14
14 32
Loading Inter...
Quick samples:

Variable Axes

Inter includes 3 variable axes, giving you fine-grained control over the font's appearance.

wght

Weight

Controls thickness from Thin (100) to Black (900)

Range: 100 – 900 (default: 400)
slnt

Slant

Italic angle from upright (0) to slanted (-10)

Range: -10 – 0 (default: 0)
opsz

Optical Size

Adjusts design for text size (display vs body)

Range: 14 – 32 (default: 14)

How to Optimize Inter

1

Subset to needed characters

Inter includes 2,500+ glyphs. Most sites need only Latin (~200 glyphs).

Savings: 70-80%

2

Convert to WOFF2

WOFF2 compression reduces file size significantly over TTF/OTF.

Savings: 30-50%

3

Instance variable axes

If you only need Regular and Bold, create static instances instead of the full variable font.

Savings: 40-60%

4

Use font-display: swap

Ensure text remains visible while Inter loads.

Savings: Performance

File Size Comparison

Inter Variable (full)
~300 KB
All weights, all glyphs
Inter Variable (Latin)
~90 KB
Latin subset only
Inter Regular WOFF2
~25 KB
Single weight, Latin
Optimized with Sift
~18 KB
Subset + WOFF2 + optimized

Sift optimizes your fonts for maximum performance with 90%+ size reduction

CSS Implementation

CSS
@font-face {
  font-family: 'Inter';
  src: url('/inter.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}

body {
  font-family: 'Inter', sans-serif;
}

For variable fonts, you can use font-variation-settings to control axes:

.custom-weight {
  font-variation-settings: "wght" 400, "slnt" 0, "opsz" 14;
}

Pro Tips for Inter

💡

Use optical sizing

Enable font-optical-sizing: auto for better readability at different sizes.

💡

Enable ligatures

Inter has great code ligatures.

💡

Preload for LCP

If Inter is used for your largest text element, preload it.

💡

Fallback stack

Use system-ui, -apple-system, sans-serif as fallbacks for minimal layout shift.

Frequently Asked Questions

What is Inter? ▼
Inter is one of the most popular open-source fonts for UI design. Designed specifically for computer screens, it features tall x-height for better readability at small sizes and includes OpenType features like contextual alternates and discretionary ligatures.
Is Inter a variable font? ▼
Yes, Inter is a variable font with 3 axes: Weight, Slant, Optical Size. This means you can continuously adjust properties for precise control.
How do I optimize Inter for web? ▼
To optimize Inter: 1) Convert to WOFF2 format for smaller files, 2) Subset to only the characters you need, 3) Use font-display: swap to prevent invisible text, 4) Preload critical font files. Sift can automate this entire process.
What license does Inter use? ▼
Inter uses the SIL Open Font License 1.1 license.

Optimize Inter Now

Convert to WOFF2, subset to Latin, and add font-display: swap in seconds.

Optimize Inter