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

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

Что уже умеем / что добавим

Вы умеете задавать цвета и выбирать элементы классами. Теперь займёмся типографикой. В сквозной проект-лендинг мы подключим современный шрифт из Google Fonts и применим его ко всей странице.

Что вы узнаете в рамках статьи

• Как менять шрифт свойством font-family.
• Что такое семейство шрифтов и запасные варианты.
• Чем отличаются шрифты с засечками и без.
• Как подключить бесплатный шрифт из Google Fonts.
• Как применить подключённый шрифт ко всей странице.

Ключевые термины

• font-family — свойство, задающее шрифт (семейство шрифтов) элемента.
• Семейство шрифтов — список шрифтов от желаемого к запасным.
• Шрифт с засечками (serif) — с «ножками» на концах букв, например Times.
• Шрифт без засечек (sans-serif) — с ровными концами букв, например Arial.
• Google Fonts — бесплатный сервис веб-шрифтов.
• Веб-шрифт — шрифт, подключаемый к сайту, а не берущийся из системы.

Свойство font-family

Шрифт элемента задаётся свойством font-family. В значении указывают название шрифта:

body {
  font-family: Arial;
}

Весь текст страницы отобразится шрифтом Arial. Свойство font-family наследуется, поэтому его удобно задавать для body — все вложенные элементы подхватят шрифт автоматически. Если название шрифта состоит из нескольких слов, его берут в кавычки: font-family: "Times New Roman";.

Семейство и запасные шрифты

Указанного шрифта может не оказаться на устройстве пользователя. На этот случай в font-family перечисляют несколько вариантов через запятую — от желаемого к запасным:

body {
  font-family: "Segoe UI", Arial, sans-serif;
}

Браузер берёт первый доступный шрифт из списка. Если нет «Segoe UI», попробует Arial, а если и его нет — возьмёт любой шрифт без засечек благодаря ключевому слову sans-serif в конце. Такой список называют «стеком шрифтов». Всегда завершайте его обобщённым семейством — sans-serif или serif, — чтобы текст гарантированно чем-то отобразился.

С засечками и без

Шрифты делятся на две большие группы. С засечками (serif) имеют маленькие «ножки» на концах букв — они выглядят классически и часто используются в текстах книг. Без засечек (sans-serif) имеют ровные концы, выглядят современно и лучше читаются на экранах, поэтому в вебе используются чаще.

h1 { font-family: Georgia, serif; }
p  { font-family: Arial, sans-serif; }

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

Подключение Google Fonts

Чтобы использовать красивый шрифт, которого нет в системе, его подключают. Проще всего через бесплатный сервис Google Fonts. Выберите шрифт на сайте, скопируйте предложенный тег <link> и вставьте его в <head> страницы — перед вашим файлом стилей:

<head>
  <meta charset="UTF-8">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

После подключения имя шрифта можно указывать в font-family, как обычно:

body {
  font-family: "Roboto", sans-serif;
}

Теперь вся страница отображается шрифтом Roboto, который загрузился из интернета. Обратите внимание: сначала подключаем шрифт тегами <link> от Google, и только потом — свой style.css, где мы этот шрифт используем.

Применяем в проекте

Подключим к лендингу современный шрифт Roboto и применим его ко всей странице. Вставьте теги Google Fonts в <head> (как показано выше), а в style.css добавьте font-family для body:

body {
  font-family: "Roboto", Arial, sans-serif;
  background-color: #f5f5f5;
  color: #333333;
}

Обновите страницу — весь текст лендинга сменил шрифт на аккуратный Roboto, а благодаря наследованию это коснулось и заголовков, и абзацев, и кнопки. Мы завершили список запасными вариантами, поэтому даже без интернета текст останется читаемым.

Частые ошибки

• Забыли подключить шрифт.
  Указать font-family: "Roboto" мало — сначала нужно подключить его тегом <link>.
• Нет запасного варианта.
  Всегда завершайте список обобщённым sans-serif или serif.
• Имя из нескольких слов без кавычек.
  "Times New Roman" — в кавычках; одно слово можно без них.
• Порядок подключения.
  Теги Google Fonts ставьте до вашего style.css, иначе шрифт может не успеть примениться.

Итоги

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

Вы отлично продвигаетесь! В следующем уроке доведём типографику до ума: настроим размер, начертание, выравнивание и межстрочный интервал текста.