# 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; }`

:

← →
↑
en ru