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 / Hairline
200— Extra Light / Ultra Light
400— Normal / Book / Regular (the default)
600— Semi Bold / Demi Bold
800— Extra Bold / Ultra Bold
900— Black / Heavy
400, you can also write
"normal”, and when typing
"bold” you’ll get the
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.