skip to main content

font-family

css

Кратко 🔗

С помощью font-family можно задать семейство шрифта, которым будет написан текст. Можно прописать конкретный шрифт, например "Arial". А можно задать желаемый тип шрифта: например, с засечками serif или без засечек sans-serif.

Пример 🔗

Допустим, мы хотим, чтобы текст был набран шрифтом PT Sans. Если такой шрифт не установлен у пользователя, то пускай откроется в Arial. Если и такого нет, то пусть будет стандартный шрифт без засечек:

body {
font-family: "PT Sans", "Arial", serif;
}

Как это понять 🔗

«PT Sans», «Arial», «Times New Roman» — это примеры семейств шрифтов. С помощью font-family можно задать любой шрифт для любого текстового элемента на странице.

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

Как пишется 🔗

Обычно в font-family задают сразу несколько шрифтов, перечисляя их через запятую. На первом месте ставят самый редкий шрифт из тех, что хотят использовать для этого элемента. Затем — похожий, но более распространённый шрифт. В самом конце — желаемый тип шрифта. Браузер проходит по списку слева направо и использует первый найденный на компьютере шрифт.

Если название семейства шрифтов содержит пробелы, то его надо взять в кавычки "" или ''.

Значения 🔗

  • <family-name> — семейство шрифтов, например, «Times» или «Helvetica».
  • <generic-name> — тип шрифта, который прописывается последним на случай, если ни одного из шрифтов нет на компьютере пользователя.
    • serif — шрифт с засечками, например, «Times».
    • sans-serif — шрифт без засечек, например, «Arial».
    • monospace — моноширинные шрифты с одинаковой шириной каждого символа. Похожи на текст, набранный на печатной машинке. Например, шрифт «Courier».
    • cursive — курсивный шрифт или italic.
    • fantasy — декоративный шрифт.
    • system-ui — использует стандартный шрифт на устройстве пользователя.
  • **inherit** — наследует шрифт у родительского элемента.

Ещё пример 🔗

Зададим разные шрифты для заголовка и для основного текста:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>font-family</title>
<style>
h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
}
p {
font-family: Georgia, "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h1>Этот заголовок написан шрифтом Geneva без засечек</h1>
<p>А этот текст — шрифтом Georgia с засечками.</p>
</body>
</html>

See the Pen font-family by Max Grachev (@max-grachev) on CodePen.

Подсказки 🔗

💡 Мы советуем использовать не больше трёх разных семейств шрифтов на одной странице. Например, один для заголовков, другой для обычного текста и третий для подписей.

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

В работе 🔗

Алёна,

🛠 Если в макете используется один из нестандартных шрифтов, то вам потребуется подключить его в свою вёрстку при помощи свойства @font-face.

🛠 Всегда указывай несколько вариантов шрифтов в следующем порядке:

CSS

font-family: "Кастомный шрифт", "Стандартный системный шрифт",
общее семейство шрифтов;

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

Семейство шрифтов указывают на случай, если ни кастомный шрифт не загрузился, ни системный шрифт не нашёлся в системе (такое возможно, поскольку в разных ОС разный набор шрифтов).

Владимир 👨‍🔧

🛠 Важно, чтобы было указано больше одного шрифта и всегда в конце стояло семейство, как последняя надежда. А то обязательно найдётся кто-то, у которого ни один из шрифтов не отображается.

То есть: Font-family: 'Open Sans' — не правильно Font-family: 'Open Sans', Arial, sans-serif; — правильно


Автор: Макс 👨‍🔧