Skip to content

Help us create more tutorials! Make a donation using the Donate button or become a member using the button below to hide this banner and track your progress.

Font properties – CSS

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.

Demo

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

Back to: CSS Course > CSS Properties