Типовые решения в вёрстке. Как подключить шрифты

Типовые решения в вёрстке

Разберём способы подключения шрифтов к страницам, а заодно настроим шрифт на странице с шапкой сайта из предыдущего совета.

Есть три способа подключения шрифтов:

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

Использование шрифтов, имеющихся у пользователя локально

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

Бутстрап — ЦСС‑фреймворк с набором готовых инструментов для быстрой вёрстки страниц

Например, Бутстрап использует этот подход по умолчанию:

Бутстрап — ЦСС‑фреймворк с набором готовых инструментов для быстрой вёрстки страниц

$font-family-sans-serif:
  // Safari for macOS and iOS (San Francisco)
  -apple-system,
  // Chrome < 56 for macOS (San Francisco)
  BlinkMacSystemFont,
  // Windows
  "Segoe UI",
  // Android
  "Roboto",
  // Basic web fallback
  "Helvetica Neue", Arial, sans-serif,
  // Emoji fonts
  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

Браузер будет перебирать шрифты по порядку, пока не найдёт существующий в системе пользователя. На Мак ОС это будет шрифт San Francisco, на Виндоусе — Segoe UI. Если не найдётся ничего из перечисленного, то будет выбран шрифт без засечек, установленный в браузере по умолчанию

Конечно, этот вариант не подойдёт, если вы хотите использовать какие‑то определённые шрифты на своём сайте.

Подключение шрифтов со стороннего сайта

Один из самых популярных ресурсов с бесплатными шрифтами — Гугль‑фонтс. Шрифты можно подключить через link за пять минут.

Выбираем шрифт, копируем код:

Вставляем его в head страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Заголовок</title>
    <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

И используем в ЦСС:

font-family: 'Rubik', sans-serif;

Если перейти по ссылке, указанной в link, мы увидим, что сервис просто возвращает набор ЦСС‑правил, которые встраиваются браузером в код страницы как стили:

/* cyrillic */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nFrXyw023e1Ik.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* hebrew */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nDrXyw023e1Ik.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* latin-ext */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nPrXyw023e1Ik.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rubik'), local('Rubik-Regular'), url(https://fonts.gstatic.com/s/rubik/v9/iJWKBXyIfDnIV7nBrXyw023e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

То же самое мы можем сделать вручную со своими шрифтами. Главное — иметь исходники необходимых шрифтов.

Подключение шрифтов вручную

Для подключения шрифтов используется специальное ЦСС‑правило @font-face, которое мы видели в примере выше. Его нужно вставить в ЦСС‑файл на верхнем уровне:

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(<путь к шрифту>) format('woff');
}

В параметре src можно указать сразу несколько источников. Браузер по очереди пройдётся по ним и выберет первый подходящий, например:

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/Rubik-regular.woff2) format('woff2'),
       url(./fonts/Rubik-regular.woff) format('woff'),
       url(./fonts/Rubik-regular.ttf) format('truetype'),
       url(./fonts/Rubik-regular.otf) format('opentype');
}

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

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

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

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Rubik'),
       url(./fonts/Rubik-regular.woff2) format('woff2'),
       url(./fonts/Rubik-regular.woff) format('woff'),
       url(./fonts/Rubik-regular.ttf) format('truetype'),
       url(./fonts/Rubik-regular.otf) format('opentype');
}

Браузер сначала проверит, есть ли у пользователя шрифт Rubik локально. Если нет, скачает его в подходящем формате

О формате WOFF на Википедии

Самый продвинутый формат шрифтов на сегодня — WOFF 2.0. Он разработан специально для веба и содержит внутри себя TTF или OTF, но с компрессией. WOFF 1.0 имеет меньшую компрессию, но поддерживается бо́льшим количеством браузеров.

О формате WOFF на Википедии

Любой шрифт можно конвертировать в другой формат через какой‑нибудь сервис. Я обычно использую Font Squirrel. В нём можно настроить набор символов, высоту строки, конвертировать шрифт в другие форматы и многое другое:

Настройка шрифта в шапке с меню

Теперь доведём до ума нашу шапку с меню. Мы остановились на таком результате:

Подключим шрифт в формате WOFF 2.0 (32 КБ) и укажем WOFF 1.0 (43 КБ), как запасной вариант:

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/rubik-regular.woff2) format('woff2'),
       url(./fonts/rubik-regular.woff) format('woff');
}

В макете мы используем Arial, но для наглядности поставим основным шрифтом Rubik, а Arial запасным:

body {
  font-family: Rubik, Arial, sans-serif;
}

Получается так:

Осталось поправить лишний правый отступ у плашки активного пункта меню, который появился из‑за letter-spacing. Вычитаем его из правого поля плашки:

.menu .active {
  padding-right: calc(10px - .27em);
  color: #fff;
  background-color: #ff3d00;
  border-radius: 8px;
}

Теперь порядок:

Итоговый результат можно посмотреть в Кодсэндбоксе.

В следующем совете мы сделаем обёртку для страницы, ограничим ширину и добавим отступы слева и справа.

Что ещё почитать

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.