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;
}
: