What does 'normal normal medium 45px/61px Oswald' mean in a css font rule?

Question

I'm working on converting a design in Adobe Xd to a HTML template, for one element its suggesting the following css rules.

top: 149px;
left: 54px;
width: 463px;
height: 208px;
text-align: left;
font: normal normal medium 45px/61px Oswald; 
letter-spacing: 0px;
color: #FFFFFF;
text-transform: uppercase;
opacity: 1;

Btw, I am familiar with the font shorthand like font: italic small-caps bold 12px/30px Georgia, serif; and it works too but what is this new format that Xd is suggesting? Even Chrome is finding it as invalid.

Answer 1

Shorthand syntax for the font property translates to:

font: font-style font-variant font-weight font-size/line-height font-family;

So that generated code is equivalent to:

/* font: normal normal medium 45px/61px Oswald; */

font-style: normal;
font-variant: normal;
font-weight: medium;
font-size: 45px;
line-height: 61px;
font-family: Oswald;

The invalid property here is font-weight, which can't accept "medium" as a value. "Medium" is an OpenType value that roughly corresponds to font-weight: 500, but isn't a valid CSS value.

This is a useful debugging technique for future reference: if you ever run into the invalid property value error when using CSS shorthand, it's helpful to rewrite the shorthand property as individual properties, which then lets the browser's devtools point out exactly which property has an invalid value.