Свойство font-family

Свойство font-family устанавливает тип шрифта.

Синтаксис

селектор {
	font-family: имя шрифта;
}

Замечание

Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

Замечание

Можно перечислять несколько похожих шрифтов через запятую. Например, font-family: Georgia, "Times New Roman". Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующий шрифт из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.

Заканчивают список обычно ключевым словом, которое описывает тип шрифта (все шрифты относятся к какому-нибудь типу) - serif, sans-serif, cursive, fantasy или monospace. Если браузер не нашел ни одного из указанных шрифтов на компьютере пользователя, то он выберет один из шрифтов указанного типа.

Типы шрифтов

Тип	Описание
`serif`	Шрифт с засечками.
`sans-serif`	Шрифт без засечек.
`cursive`	Курсивный шрифт.
`fantasy`	Декоративный шрифт с красивыми завитушками и необычными эффектами.
`monospace`	Моноширинный шрифт, ширина каждого символа в котором одинакова.

Значение по умолчанию: шрифт, установленный в браузере по умолчанию. Обычно это Times New Roman.

Пример

Назначим шрифту семейство Arial:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

Пример

Назначим шрифту семейство Times New Roman. Так как название шрифта состоит из нескольких слов, то берем его в кавычки:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: "Times New Roman";
}

Пример

Назначим шрифту шрифт из группы serif (скорее всего возьмется Times New Roman):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

Пример

Назначим шрифту шрифт из группы sans-serif (скорее всего возьмется Arial):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

Пример

Назначим шрифту шрифт из группы fantasy (у вас может и не сработать из-за отсутствия такого шрифта):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

Пример

Назначим шрифту шрифт из группы monospace (буквы станут одинакового размера):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}