Guide · 3 min read

How to use a matched font on your website

Once you’ve identified a font, putting it on your site is a two-line change.

Add the stylesheet link to your HTML head, or import it in your CSS. Google Fonts serves it from a fast global CDN:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">

Then set the family in CSS:

body { font-family: "Inter", system-ui, sans-serif; }

Our result cards give you the CSS snippet with one click. For paid fonts, you’ll buy a license from the foundry and self-host the files — never hotlink commercial webfonts.

Keep an eye on performance: load only the weights you actually use, and consider preconnecting to the font CDN. A couple of hundred kilobytes of web font is fine; a dozen families is not.

Try it on your own image

Paste a screenshot into the font finder and get ranked matches against 1,800+ free fonts — free and unlimited, entirely in your browser.

Identify a font

Next: frequently asked questions about identifying fonts.