Your Variable Font Only Shows One Weight. Here Is Why

You downloaded a variable font, put it on your site, and only one weight works. Bold does nothing, or bold looks fake and slightly smeared. This is the most common problem with variable fonts and it has four possible causes, in descending order of likelihood.

One: the font-weight in your @font-face is a single number

This is it about eight times out of ten. A static font declares font-weight: 400. A variable font has to declare the range it covers — font-weight: 100 900 — because that descriptor is how the browser learns the file has a range at all.

Declare a single value and the browser believes you. Ask for bold and it will synthesise one by smearing the regular, which is the "fake bold" look. The range has to match what the font actually contains; every font page on this site generates the rule with the correct range already in it.

Two: the platform form asked which weight it was

Webflow, Shopify and most theme uploaders ask you to tag each uploaded file with a weight and style, because that is how they build the CSS for you. Tag a variable file as 400 and you have just done the same thing as above through a form instead of a stylesheet. These platforms support variable fonts; you have to tell them the file is one.

Three: the application does not read variable fonts

If the problem is in Word, Canva, or an older version of Photoshop rather than in a browser, the font is fine and the software is not. Those read the file’s default instance and offer one weight. The fix is the static download — every variable family on this site ships a second zip with one ordinary file per weight, and the variable font post explains which to take.

Four: the file defaults to something other than regular

A handful of families default to a weight that is not 400 — some open to a hairline. Install one of those and the menu shows a very thin font, which reads as the download being broken when it is not. Font pages here say so explicitly where it applies, because the alternative is somebody deleting a perfectly good file.

How to check what the file actually contains

Every font page here lists the weights measured from the file rather than claimed by a description, so the range in the CSS snippet is the range in the font. If you got the file elsewhere, drop it into the font converter — it reads the file’s tables and will tell you what it is, which is also how you find out that a file called .ttf is actually something else.