CSS Web Safe Fonts
Web-safe fonts are families almost every device has installed - so you can use them without loading a font file. system-ui is the modern catch-all.
Font stacks in practice
EXAMPLE
/* The modern 'native UI' stack - matches the OS's interface font */
.system-ui {
font-family:
system-ui,
-apple-system, /* iOS / macOS */
'Segoe UI', /* Windows */
Roboto, /* Android */
Ubuntu, /* Ubuntu */
Cantarell, /* GNOME */
'Helvetica Neue',
sans-serif;
}
/* Classic safe stacks */
.sans {
font-family: Helvetica, Arial, sans-serif;
}
.serif {
font-family: Georgia, Times, 'Times New Roman', serif;
}
.mono {
font-family: ui-monospace, 'SF Mono', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;
}
/* Best practice: list candidates from most-preferred to most-likely-installed */
body {
font-family: 'Inter', system-ui, sans-serif;
/* Inter if loaded; fall back to the OS font; finally any sans */
}
/* Loading a custom font with @font-face + font-display */
@font-face {
font-family: 'Inter Variable';
src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
font-weight: 100 900; /* variable range */
font-style: normal;
font-display: swap; /* show fallback immediately, swap in when ready */
}
/* Apply it */
body { font-family: 'Inter Variable', system-ui, sans-serif; }
/* Use the link preconnect/preload trick for performance */
<!--
<link rel='preconnect' href='https://fonts.googleapis.com'>
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' href='/fonts/Inter-Variable.woff2' as='font' type='font/woff2' crossorigin>
-->
/* Variable fonts shrink HTTP requests */
.fluid-weight {
font-family: 'Inter Variable', sans-serif;
font-weight: 425; /* any value in the range, not just 400/700 */
font-variation-settings: 'wght' 425, 'slnt' -8;
}
/* Tabular figures for tables of numbers */
.numbers {
font-variant-numeric: tabular-nums;
}
/* Localize - prefer local() before downloading */
@font-face {
font-family: 'My UI';
src:
local('Inter'), /* if the user has it, skip download */
url('/fonts/Inter.woff2') format('woff2');
}
Why it matters
Start with system-ui for native-feeling UIs - zero HTTP requests and instant load. Reach for a custom variable font (one file, every weight) only when brand demands it, and always set font-display: swap so the fallback shows immediately.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Web Safe Fonts</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
The keyword that picks the OS's default UI font is…
body { font-family:
, sans-serif; }
Hyphenated — system-?
Discussion
Loading…