Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Как изменить шрифт

Короткий ответ

Перечислите шрифты в 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`.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.