Skip to content

Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Font properties – CSS



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;


Here is some more information on the different font properties that you can use.


Some common values for font-style are normal, italic, and oblique.


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.


The font-size property can take any length unit (pixels, ems, rems, etc.).


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.


Use VS Code’s suggestions to view possible font-family options.


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.


First, recreate the CSS code from the Demo section in your CSS file. Then try changing the values for the properties.


font property on MDN

Back to: CSS Reference > CSS Properties