Change the radio buttons below to see the generated shorthand and it's effect.
font-style
none
normal
italic
oblique
font-variant
none
normal
small-caps
font-weight
none
normal
bold
font-size
12px
16px
24px
line-height
none
1.2
3
font-family
courier
serif
sans-serif
Arial
monospace
cursive
fantasy
system-ui
font :
font-style
optional
font-variant
optional
font-weight
optional
font-size
mandatory
line-height
optional
font-family
mandatory
This is some sample text.