Demo
Summary
To change the font of an element using CSS, use the font-style, font-weight, font-size, line-height, and font-family properties:
selector {
font-style: italic;
font-weight: bold;
font-size: 20px;
line-height: 2;
font-family: Arial, sans-serif;
}You can also use the font property, which combines the five properties from above into one:
selector {
font: italic bold 20px/2 Arial, sans-serif;
}Details
Here is some more information on the different font properties that you can use.
font-style
Some common values for font-style are normal, italic, and oblique.
font-weight
Some common values for font-weight are 100, 200, 300, 400, 500, 600, 700, 800, and 900. You can also use the keyword values normal, bold, lighter, and bolder.
font-size
The font-size property can take any length unit (pixels, ems, rems, etc.).
line-height
The line-height value can use any length unit, or a unitless number. For the unitless number, the end value is computed by the computer by multiplying the element’s font-size by the unitless number.
font-family
Use VS Code’s suggestions to view possible font-family options.
font
When using the shorthand font property, the font-style and font-weight values must come before the font-size value. The line-height should immediately follow the font-size separated by a forward slash. The font-family value(s) must be last.
Other notes
The longhand properties can be used individually or together, as in the example above.
Exercises
First, recreate the CSS code from the Demo section in your CSS file. Then try changing the values for the properties.
References
font property on MDN