How to change the font in CSS?

The font property in CSS is used to control the look of texts. By using it, we can change the text size, color, style, and more. This CSS property is a shorthand property and combines the sub-properties (that are font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family) in a single declaration.

The two values of the shorthand font property are mandatory that are the font-size and font-family. If both of these properties are not included, then the entire declaration will be ignored. It is also mandatory to declare the value of font-family at the last of all values; otherwise, the declaration will again be ignored. The other five values are optional.

The font-family property allows the multiple font names as the fallback value because if the browser does not support the first font, then it will try the next font, and so on. The declaration of more than one value of font-family has to be specified in a comma-separated list.

Note: If the name of the font-family has more than one word, it must be written in quotation marks, like: "Lucida Console".

If we are using the font-style, font-variant, and font-weight in the font shorthand property, they must be declared before the font-size in the declaration. If they aren't, they will be ignored and will cause the ignorance of mandatory values.

In the above declaration, we have included the optional values, but they are defined before defining the font-size.

The line-height is also optional, but if we have to declare it, it must be declared only after the font-size with a forward slash.

In the above declaration, the 15px is a line-height. If we remove the line-height, then we must also have to remove the slash; otherwise, the entire declaration will be ignored.

Let's understand how to change the font in CSS by using examples.

Example

Output

Example

In the above example, we have used the font properties individually. Now, in this example, we are using the font shorthand property. The sub-properties that we are using in this font shorthand property are font-style, font-variant, font-weight, font-size, and font-family.

Output