Шрифты на сайте. Подключение и использование web-шрифтов

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

Шрифты на сайте

Как подключить шрифт на сайт? Какой формат должен быть?

В настоящее время большинство современных браузеров (да абсолютно все) поддерживают формат .woff. Следовательно, нет смысла подключать шрифты каких-либо других форматов. Сконвертировать любой шрифт (.ttf, .otf или .eot) можно, например, с помощью данного ресурса.

Подключить шрифт на сайт можно с помощью Google Fonts.

Пример: требуется шрифт «Open Sans». Переходим на данный ресурс, находим нужный шрифт и жмем:

Кнопка выбора шрифта

Во вкладке «Customize» выбираем необходимые начертания и языки:

Выбор начертания шрифта

Во вкладке «Embed» выбираем «Import» и следуем инструкции для подключения на свой сайт:

Окно с описанием подключения шрифта

Подключение с помощью @font-face

Часто бывает, что нужных вам шрифтов нет в Google Fonts. Это не беда, и вовсе не значит, что данный шрифт является не подходящим для использования на сайтах.

Ищите и скачиваете нужный шрифт любого формата, конвертируете его в .woff. Далее его нужно объявить на вашем сайте (в CSS) таким образом:

@font-face {
  src: url("fonts/my-font-regular.woff") format("woff");
  font-family: "My Font";
  font-weight: 400;
  font-style: normal;
}

Используется шрифт так:

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

Существуют следующие начертания (в @font-face принято подключать шрифты именно в таком порядке):

  • font-weight: 100, font-style: normal (thin)
  • font-weight: 100, font-style: italic (thin italic)
  • font-weight: 200, font-style: normal (extra light)
  • font-weight: 200, font-style: italic (extra light italic)
  • font-weight: 300, font-style: normal (light)
  • font-weight: 300, font-style: italic (light italic)
  • font-weight: 400, font-style: normal (regular)
  • font-weight: 400, font-style: italic (regular italic)
  • font-weight: 500, font-style: normal (medium)
  • font-weight: 500, font-style: italic (medium italic)
  • font-weight: 600, font-style: normal (semi bold)
  • font-weight: 600, font-style: italic (semi bold italic)
  • font-weight: 700, font-style: normal (bold)
  • font-weight: 700, font-style: italic (bold italic)
  • font-weight: 800, font-style: normal (extra bold)
  • font-weight: 800, font-style: italic (extra bold italic)
  • font-weight: 900, font-style: normal (heavy)
  • font-weight: 900, font-style: italic (heavy italic)