Свойство font-family устанавливает тип (семейство) шрифта - Arial, Times New Roman и т.п.

Не все шрифты можно использовать, так как если на компьютере пользователя не окажется указанного шрифта - браузер вместо него возьмет стандартный шрифт (в результате на экране будет совсем не то, что мы задумывали). Поэтому необходимо использовать только веб безопасные шрифты, которые наверняка будут у пользователя.

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

Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующий шрифт из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере.

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

Шрифты бывают с засечками serif и без засечек sans-serif. Засечки - это специальные штрихи на концах букв (выделены красным):

Засечки являются отличительной особенностью шрифта, нет такого, чтобы был одновременно с засечками и без засечек. Arial с засечками будет уже какой-то другой шрифт, но никак не Arial.

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

Синтаксис

селектор {
	font-family: название шрифта | serif | sans-serif | cursive | fantasy | monospace | inherit;
}

Значения

Значение Описание
Название шрифта Указывается название шрифта с большой буквы: Arial, "Times New Roman" и так далее. Следует брать веб безопасные шрифты, которые без проблем поддерживаются на подавляющем большинстве компьютеров пользователей. Если вам нужен нестандартный шрифт - воспользуйтесь @font-face.
serif Шрифт с засечками.
sans-serif Шрифт без засечек.
cursive Курсивный шрифт.
fantasy Декоративный шрифт с красивыми завитушками и необычными эффектами.
monospace Моноширинный шрифт, ширина каждого символа в котором одинакова.
inherit Наследует значение родителя.

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

Веб безопасные шрифты

Безопасным шрифтом можно назвать такой шрифт, который является стандартным для всех операционных систем. Поскольку о таком положении дел остается только мечтать, то абсолютно безопасных шрифтов не существует! Отдельные шрифты можно назвать безопасными с некоторыми оговорками. Вот они:

Значение Описание
Arial Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Arial Black Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Comic Sans MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Courier New Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Georgia Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Impact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Times New Roman Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Trebuchet MS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.
Verdana Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl.

Подробнее о проблемах шрифтов читайте здесь.

Примеры

Пример

p {
	font-family: Arial;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

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

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

p {
	font-family: serif;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

p {
	font-family: sans-serif;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

p {
	font-family: fantasy;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

p {
	font-family: cursive;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример

p {
	font-family: monospace;
}

Результат выполнения кода:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.