5 of 313 menu

The font-family property

The font-family property sets a font type.

Syntax

selector { font-family: font name; }

Note

If the font name contains spaces, such as Times New Roman, it must be enclosed in single or double quotes.

Note

You can list several similar fonts separated by commas. When the browser encounters the first font in the list, it checks for its presence on the user's computer. If there is no such font, the next font from the list is taken and also analyzed for presence. Therefore, multiple fonts increases the probability that at least one of them will be detected on the client computer.

The list usually ends with a keyword that describes the font type (all fonts belong to some type) - serif, sans-serif, cursive, fantasy or monospace. If the browser does not find any of the specified fonts on the user’s computer, it will select one of the fonts of the specified type.

Font types

Type Description
serif Serif font.
sans-serif Sans serif font.
cursive Cursive font.
fantasy A decorative font with beautiful curls and unusual effects.
monospace A monospaced font in which the width of each character is the same.

Default: The browser's default font. Usually this is Times New Roman.

Example

Let's assign the Arial family to a font:

<p> Lorem ipsum dolor sit amet. </p> p { font-family: Arial; }

:

Example

Let's assign the Times New Roman family to the font. Since the font name consists of several words, we put it in quotes:

<p> Lorem ipsum dolor sit amet. </p> p { font-family: "Times New Roman"; }

:

Example

Let's set a font from the serif group (most likely Times New Roman):

<p> Lorem ipsum dolor sit amet. </p> p { font-family: serif; }

:

Example

Let's set a font from the sans-serif group (most likely it will be Arial):

<p> Lorem ipsum dolor sit amet. </p> p { font-family: sans-serif; }

:

Example

Let's set a font from the fantasy group (it may not work for you due to the lack of such a font):

<p> Lorem ipsum dolor sit amet. </p> p { font-family: fantasy; }

:

Example

Let's set a font from the monospace group (the letters will become the same size):

<p> Lorem ipsum dolor sit amet. </p> p { font-family: monospace; }

:

byenru