font inspectorFree fonts similar to SF Pro (San Francisco)
When a site looks like it uses San Francisco, it almost always declares the system font, so Apple devices draw SF Pro and everyone else gets their own system font. If you need the same look on every device, you need a lookalike you are allowed to serve.
Short answer: the closest free alternative to SF Pro (San Francisco) is Inter. Roboto is also worth a look. All are open source and free for commercial use.
SF Pro (San Francisco) is not installed on this device, so it cannot be drawn here. The free alternatives below are live. On a device that has it, this row shows the original and unlocks the overlay.
/* Inter is open source. Self-host it or load it from Google Fonts. */ font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
The alternatives in detail
1. Inter
Why it works. Designed for user interfaces with the same goals as SF Pro: a tall x-height, clear numerals and excellent legibility at small sizes.
What differs. Slightly wider and rounder. Apply a little negative letter spacing on large headings to get the Apple feel.
2. Roboto
Why it works. The Android system font, so it brings a similar native, utilitarian character.
What differs. Narrower with more mechanical curves. It reads as Google rather than Apple.
How to recognize SF Pro (San Francisco)
Designed in-house by Apple and introduced in 2015. It is the system font on iOS, macOS, watchOS and tvOS.
- The CSS says
-apple-system,BlinkMacSystemFontorsystem-uirather than a font name. - Compact, slightly squared curves and flat stroke endings.
- Tight tracking at headline sizes and looser tracking at small sizes, adjusted automatically.
In a site’s CSS it may appear as San Francisco, SF Pro Text, SF Pro Display, -apple-system, BlinkMacSystemFont, system-ui. Not sure what you are looking at? Identify the font on the live page first.
Seen on sites we inspected
These pages show the exact sizes, weights and spacing measured on the live site, for SF Pro (San Francisco) or the brand typeface that replaced it.
Is SF Pro (San Francisco) free?
Apple offers it as a free download, but the license only covers designing and mocking up software for Apple platforms. It cannot be embedded as a web font. Websites get it on Apple devices by asking for the system font.
The alternatives on this page are open source, so you can use them on commercial sites, self-host the files and ship them in products. Read more in font licensing in plain English.
Use Inter in your CSS
Put the free font first and keep sensible fallbacks behind it. Self-hosting the files is the most private and usually the fastest option.
@font-face {
font-family: "Inter";
src: url("/fonts/inter-400.woff2") format("woff2");
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Inter";
src: url("/fonts/inter-700.woff2") format("woff2");
font-weight: 700;
font-display: swap;
}
body {
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}Saw a font you can’t place, or can’t afford?
Font Inspector names the font on any website in one click. For popular paid and system fonts it suggests free look-alikes right in the panel.
Questions & answers
What is the closest free font to SF Pro (San Francisco)?
Inter is the closest free alternative to SF Pro (San Francisco). Designed for user interfaces with the same goals as SF Pro: a tall x-height, clear numerals and excellent legibility at small sizes. Roboto is also worth testing.
Is SF Pro (San Francisco) free to use?
Apple offers it as a free download, but the license only covers designing and mocking up software for Apple platforms. It cannot be embedded as a web font. Websites get it on Apple devices by asking for the system font.
What Google Font looks like SF Pro (San Francisco)?
On Google Fonts, the nearest matches are Inter and Roboto. All are open source and free for commercial use. None is an exact copy, so compare them with your own text first.
How can I tell whether a website uses SF Pro (San Francisco)?
Inspect the text. Browser DevTools show the rendered font in the Computed tab, and the Font Inspector extension shows the family, the rendered font and free look-alikes in one click.
Segoe UI
Try Open Sans and Noto Sans
HUMANIST SANS SERIFCalibri
Try Carlito, Open Sans and Lato
NEO-GROTESQUE SANS SERIFArial
Try Arimo, Roboto and Inter
TRANSITIONAL SERIFTimes New Roman
Try Tinos, Source Serif 4 and Newsreader
TRANSITIONAL SERIF FOR SCREENSGeorgia
Try Gelasio, Merriweather and Source Serif 4
OLD-STYLE (GARALDE) SERIFGaramond
Try EB Garamond, Cormorant Garamond and Crimson Pro