How to Tell if a Website Uses System Fonts vs Custom Web Fonts

Some websites use the fonts already on your device (system fonts), and others download their own (web fonts). You can tell which in under a minute, and it explains why a site looks different on Windows and Mac, or why it loads slowly.

The quick way: Chrome DevTools

1. Right-click some text and choose Inspect.
2. In the panel, open the Computed tab.
3. Scroll to the bottom to Rendered Fonts. It shows the font actually used, and either Local file (a font on your device) or Network resource (a downloaded web font).

This is the most reliable check, because it shows what your browser really drew, not just what the site asked for.

See every font a site downloads

In DevTools, open the Network tab, click the Font filter and reload the page. You'll see each font file (usually .woff2), its size and where it came from. No files listed means the page uses only system fonts.

Clues in the CSS and source

• System font stacks look like system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. That means "use the device's own interface font": San Francisco on Apple devices, Segoe UI on Windows and Roboto on Android.
• Web fonts appear as @font-face rules in the CSS, or as links in the page source to fonts.googleapis.com (Google Fonts) or use.typekit.net (Adobe Fonts).

The easiest way: an extension

Font Detector shows the font family, size, weight and color of any text you click, without opening DevTools. It's the quickest way to check headings, body text and buttons on a page one after another.

Why sites choose one or the other

• System fonts: load instantly, look native on each device, and cost nothing. The trade-off is a slightly different look on each platform.
• Web fonts: the same look everywhere and a stronger brand identity, at the cost of extra downloads. Good sites limit the number of weights and use font-display: swap so text appears right away.

Why a site looks different on another computer

If a site uses system fonts, or a web font fails to load, each device shows its own font. Fonts also render differently across operating systems even when they're the same font. See font rendering differences across systems, and for choosing your own, Google Fonts combinations that work.