Sift

Roboto

by Christian Robertson (Google) ★★★★★ Sans-serif Variable Font
Optimize Now

Quick Answer

Roboto is a variable sans-serif font with 3 adjustable axes (Weight, Width, Italic). Google's signature typeface. Mechanical skeleton with friendly curves, perfect for Android and Material Design.

Performance Impact

90%
Size Reduction
150 KB → 15 KB
-320ms
LCP Improvement
Core Web Vitals boost
12ms
4G Transfer Time
After optimization
100ms
Max Render Block
With font-display: swap

Download Time by Network

Slow 3G (400 Kbps) 300ms
vs ~3000ms unoptimized
Fast 3G (1.5 Mbps) 80ms
vs ~800ms unoptimized
4G LTE (10 Mbps) 12ms
vs ~120ms unoptimized

Optimization reduces Roboto from 150 KB to 15 KB — making your site faster on every device.

Try Roboto

Live Preview

Variable Axes
400
100 900
100%
75 100
0°
0 1
Loading Roboto...
Quick samples:

Variable Axes

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

wght

Weight

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

Range: 100 – 900 (default: 400)
wdth

Width

Controls width from Condensed (75) to Normal (100)

Range: 75 – 100 (default: 100)
ital

Italic

Toggles between upright and italic styles

Range: 0 – 1 (default: 0)

How to Optimize Roboto

1

Subset to Latin

Roboto supports 300+ languages. Remove unused scripts like Cyrillic, Greek, and Vietnamese.

Savings: 60-70%

2

Convert to WOFF2

Essential compression step. All modern browsers support WOFF2.

Savings: 25-35%

3

Limit to needed weights

Most designs only need 2-3 weights. Skip Thin, Light, and Black if unused.

Savings: 50-70%

4

Use font-display: swap

Show fallback text immediately while Roboto loads.

Savings: Performance

File Size Comparison

Roboto Variable (full)
~150 KB
All weights, all scripts
Roboto Variable (Latin)
~45 KB
Latin subset only
Roboto Regular WOFF2
~20 KB
Single weight, Latin
Optimized with Sift
~15 KB
Subset + WOFF2 + optimized

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

CSS Implementation

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

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

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

.custom-weight {
  font-variation-settings: "wght" 400, "wdth" 100, "ital" 0;
}

Pro Tips for Roboto

💡

Match Android system font

Use Roboto for web apps that complement Android apps for visual consistency.

💡

Enable antialiasing

Add -webkit-font-smoothing: antialiased for smoother rendering on macOS.

💡

Consider Roboto Flex

The newer Roboto Flex variable font offers more axes including optical size.

💡

Fallback to system-ui

system-ui provides similar metrics on most platforms.

Frequently Asked Questions

What is Roboto? ▼
Roboto is a neo-grotesque sans-serif developed by Google as the system font for Android. It features a mechanical skeleton with mostly geometric forms, softened by friendly and open curves. The letterforms are designed to be optimally legible across all screen sizes and resolutions.
Is Roboto a variable font? ▼
Yes, Roboto is a variable font with 3 axes: Weight, Width, Italic. This means you can continuously adjust properties for precise control.
How do I optimize Roboto for web? ▼
To optimize Roboto: 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 Roboto use? ▼
Roboto uses the Apache License 2.0 license.

Optimize Roboto Now

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

Optimize Roboto