Font Weight

In Code, you set the different weights with numbers, just as in CSS.
Here’s a list of what the different values stand for:
100
— Thin / Hairline200
— Extra Light / Ultra Light300
— Light400
— Normal / Book / Regular (the default)500
— Medium600
— Semi Bold / Demi Bold700
— Bold800
— Extra Bold / Ultra Bold900
— Black / Heavy
Instead of 400
, you can also write "normal”
, and when typing "bold”
you’ll get the 700
weight.
In Design, you can see which font weights a specific typeface actually has (and select them from the list).
Very few typefaces will have all these weights, though. Most only have Normal and Bold.
When a typeface doesn’t have the weight that you picked, Framer will use the closest available one. (So it makes sense to check in Design if a weight even exists.)
Sometimes a particular weight might be found in a separate typeface. To get the black version of "Arial"
, for instance, you’ll need to use the "Arial Black"
font family.
Note: Even though fontWeight
is a numeric value, it is not animatable. Animating to a new value will simply skip the in-between values.