Let's consider the most common font-related properties.

Note

All examples will be demonstrated using the same text content to provide an opportunity to observe how the same text can be displayed differently.

font-family

The font-family property defines the font family or families that will be used for displaying text content. It is possible to specify a single font family name or a list of multiple font family names separated by commas.

font-size

The font-size property sets the font size for displaying text content. It can be a fixed size measured in px or a relative size measured in em or rem units.

font-weight

The font-weight property determines the weight or thickness of the font used to display text content. It can be specified as a numerical value (e.g., 300, 500, 700, ...) or as a keyword (e.g., lighter, normal, or bold).

font-style

The font-style property specifies the style of the font to be used for text content. This can be normal (the default value), italic, or oblique.

Pseudo-Class first-letter

The first-letter pseudo-class selects and styles the first letter of a paragraph or heading. To use this pseudo-class, we need to put double :: after a selector and add the keyword first-letter.

Let's run the next example to see how it works.