Free 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.
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.
Helvetica
Try Inter, Arimo and Roboto
NEO-GROTESQUE SANS SERIFHelvetica Neue
Try Inter, Arimo and Hanken Grotesk
GEOMETRIC GROTESQUE HYBRIDProxima Nova
Try Montserrat, Figtree and Nunito Sans
GEOMETRIC SANS SERIFGotham
Try Montserrat, Outfit and Figtree
GEOMETRIC SANS SERIFFutura
Try Jost, League Spartan and Outfit
GEOMETRIC HUMANIST SANS SERIFAvenir
Try Nunito Sans, Figtree and Mulish