Часто при разработке сайтов дизайнеры используют кастомные шрифты. Это такие шрифты, которые не имеют возможности быть добавленными через Google Fonts или подобные ресурсы напрямую. Единственный способ использовать их в своем проекте - хранить у себя на сервере и подгружать по адресу в стилях. Использование правила @font-face как раз позволяет управлять этим процессом, указав адрес шрифта и остальные его параметры.

Шаги для подключения шрифтов в CSS с использованием правила @font-face:

1. Найдите шрифт, который хотите использовать. Вам может предоставить его дизайнер или вы можете найти его на любом предназначенном для этого ресурсе (например Google Fonts, Adobe Fonts или Font Squirrel). Главное - убедитесь, что у вас есть надлежащая лицензия на использование шрифта.
2. Скачайте файлы шрифтов. Создайте специальную папку для шрифтов (например "fonts" или "assets") внутри вашего проекта и поместите туда все свои файлы шрифтов.
3. Подключите их с помощью правила @font-face. В файле CSS стилей определите правило @font-face и укажите путь к файлам шрифтов, используя свойство src. Вы также можете установить другие свойства, такие как font-weight, font-style и font-display.

Пример использования @font-face:

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/MyCustomFont-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

После того как вы определили правило @font-face и указали путь к вашему шрифту, вы можете использовать его в своем CSS, указав свойство font-family с именем, которое вы указали в правиле @font-face. Пример:

body {
  font-family: 'MyCustomFont', sans-serif;
}

В примере для свойства font-family установлено значение 'MyCustomFont', а также через запятую резервный шрифт - без засечек (sans-serif) на случай, если кастомный шрифт не загрузится.

Использование локальных шрифтов

Правило @font-face в CSS позволяет указать кастомный шрифт, который будет использоваться на вашем веб-сайте. Свойство src этого правила как раз помогает указать адрес файла шрифта. Однако его также можно использовать для указания имени шрифта, установленного на компьютере пользователя.

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

Например, вы хотите использовать шрифт "Open Sans" на своем веб-сайте, и у вас есть файлы как обычного, так и полужирного шрифта. Вы можете определить правило @font-face следующим образом:

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans'), 
       url('/fonts/OpenSans-Regular.ttf') format('truetype'),
       url('/fonts/OpenSans-Bold.ttf') format('truetype');
}

В этом примере для свойства font-family установлено значение 'Open Sans', которое является названием шрифта, который будет использоваться на всем веб-сайте. Свойство src имеет три значения:

1. Первое значение, local('Open Sans') - указывает, что если у пользователя уже установлен шрифт в его системе с именем "Open Sans", то его следует использовать. Это может сэкономить время и трафик, поскольку файл шрифта не нужно загружать с сервера.
2. Второе значение, url('/fonts/OpenSans-Regular.ttf'), указывает адрес файла шрифта, который будет использоваться для обычной жирности шрифта.
3. Третье значение, url('/fonts/OpenSans-Bold.ttf'), указывает адрес файла шрифта, который будет использоваться для жирного шрифта.

Форматы шрифтов

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

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

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

Какой формат шрифта использовать и когда?

Какая поддержка форматов шрифтов в браузерах?

Свойства шрифтов для @font-face

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