We build a Figma-to-website renderer, so I've debugged this failure more times than I'd like. Fonts break between design and browser for three distinct reasons, and people usually try the fix for the wrong one. Start by working out which one you actually have.

Open your live site in Chrome, right-click your heading, Inspect. In the Styles pane look at font-family and font-weight. Then scroll to the very bottom of the Computed tab, where Chrome lists Rendered Fonts. That tells you what the browser really drew with, which is often not what the CSS asked for.

Cause 1: right typeface, wrong weight

This is the most common one by a mile. The headline is the correct font but it looks thin and lifeless next to the design.

Figma does not store a numeric weight. It stores a family plus a style string. When you pick Inter SemiBold, Figma's API reports { family: "Inter", style: "SemiBold" }. CSS has no idea what SemiBold means. If that string lands in your stylesheet you get:

font-weight: SemiBold; /* invalid, browser throws the whole declaration away */

The browser drops the declaration and falls back to normal, which is 400. So your 600-weight headline renders at 400 and nobody gets an error message. Same story for italics: Figma's "Light Italic" is one string covering two separate CSS properties.

You have to translate it. The mapping our renderer uses:

Thin, Hairline          100
ExtraLight, UltraLight  200
Light                   300
Regular, Normal, Book   400
Medium                  500
SemiBold, DemiBold      600
Bold                    700
ExtraBold, Heavy        800
Black                   900

Then split the slant out separately, because "Italic" or "Oblique" anywhere in the string means font-style: italic. So Figma's Light Italic becomes:

font-weight: 300;
font-style: italic;

One gotcha if you write this yourself: check the long tokens before the short ones. A naive substring match reads ExtraBold as Bold and gives you 700 instead of 800.

Cause 2: the font never loads at all

Rendered Fonts says Times New Roman or Arial. The CSS is asking for the right family, but nothing is there to load.

A font renders in a browser only if it's downloaded from your server or already installed on the visitor's machine. Figma will not hand you the font file. There's no export-fonts command, and the workaround people pass around is just linking developers to wherever they bought it. Your Mac having the font installed does nothing for a visitor on a Windows laptop.

So check whether your typeface is on Google Fonts. If it is, load it and you're done:

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,600;1,400&display=swap">

Two rules that URL enforces. The family name has to match Google's catalog name exactly, with spaces encoded as + or %20. family=PlusJakartaSans returns a 400 and you get no CSS at all. And you have to ask for the weights you actually use. Requesting a weight the family doesn't publish also 400s the request, so if you only load 400 and your design uses 600, the browser will fake the bold by smearing the 400 outlines, which looks worse than picking a different font.

If the typeface is not on Google Fonts, there are two honest options and no third one. Pick the closest Google Fonts equivalent, or buy a webfont license and self-host. Most commercial fonts sell desktop and web licenses separately, and converting a desktop file to WOFF2 does not grant you web rights. Once you have licensed WOFF2 files:

@font-face {
  font-family: "Your Font";
  src: url("/fonts/yourfont-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

One @font-face block per weight and style you use.

Cause 3: every font on the page defaults at once

Headings, body, buttons, all of it suddenly Times New Roman. That points at one broken stylesheet link rather than one broken font.

The Google Fonts css2 endpoint has historically been strict about malformed requests, and if a link returns 400 you get zero CSS back from that link. If you crammed six families into one URL, one typo or one family Google doesn't carry can take the whole request down. I just tested current behaviour and a mixed request now returns 200 and silently drops the family it doesn't recognise, but a request for only an unknown family still returns 400. Either way, the safe pattern is the same: one <link> per family. Then a bad font only kills its own font, and the rest of the page still gets styled. Our renderer builds the links that way for exactly this reason.

Check it in the Network tab. Filter to CSS, reload, and look for anything with a red 400.

The fast triage

Wrong weight, correct typeface means you have a style-string translation problem. Correct weight, wrong typeface means the font never loaded. Everything defaulting at once means a stylesheet request failed.

If you'd rather not maintain this by hand, our Figma plugin does the weight translation and the per-family font loading when it publishes.