Is there a way to use numeric font weight in CSS font shorthand?

Question

Can I somehow use numeric font weight value (100-900) when I define a value of the font shorthand like font: 12px 600 sans-serif ?

Answer 1

Yes, it's possible, but it seems like, you must put the bold keyword before your size and then it will work.

If font is specified as a shorthand for several font-related properties, then; there are some rules as listed on Mozilla docs.

• font-style, font-variant and font-weight must precede font-size.
• font-variant may only specify the values defined in CSS 2.1, that is normal and small-caps
• font-stretch may only be a single keyword value
• line-height must immediately follow font-size, preceded by "/", like this: "16px/3"
• font-family must be the last value specified.

.a {
  font: 400 12px Georgia, serif;
}
.b {
  font: bold 12px Georgia, serif;
}
.c {
  font: 700 12px Georgia, serif;
}

<p class="a">The font Property</p>
<p class="b">The font Property</p>
<p class="c">The font Property</p>