Как изменить шрифт
Короткий ответ
Перечислите шрифты в font-family через запятую и закончите запасным семейством:
<p style="font-family: Georgia, 'Times New Roman', serif; font-size: 20px;">Text in a serif font</p>Браузер берёт первый шрифт из списка, который есть на устройстве. Последнее слово — общее семейство: serif (с засечками), sans-serif (без засечек) или monospace (моноширинный).
Шрифт для всей страницы
Задайте его элементу body — остальные элементы унаследуют:
<style>
.page { font-family: system-ui, sans-serif; line-height: 1.6; }
</style>
<div class="page">
<h3>Heading</h3>
<p>A paragraph in the same font.</p>
</div>system-ui — шрифт интерфейса операционной системы: он уже установлен, грузится мгновенно и привычно выглядит.
Свой шрифт
Шрифт, которого нет на устройстве, подключают через @font-face или ссылкой на сервис шрифтов — об этом отдельный ответ «Как подключить свой шрифт».
Частая ошибка
Имена из нескольких слов без кавычек и забытое общее семейство в конце. font-family: Times New Roman формально работает, но с кавычками надёжнее, а без serif в конце на устройстве без этого шрифта текст покажется случайным шрифтом по умолчанию.
Функции из этого ответа
- font-family — Семейство шрифта со списком запасных вариантов.
- font-size — Размер шрифта.
- font-weight — Насыщенность (жирность) шрифта.
- @font-face — Подключает шрифт и даёт ему имя для использования в `font-family`.