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

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

Шаг 1: Использование @font-face

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

@font-face {
    font-family: 'AwesomeFont';
    src: local('AwesomeFont'),
         url('/path/to/awesome_font.woff2') format('woff2'),
         url('/path/to/awesome_font.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

👉 font-family задаёт название шрифта, которое мы будем использовать в CSS для вызова шрифта.
👉 src определяет источники шрифта:
- local('AwesomeFont') - пытается найти шрифт, установленный локально на устройстве пользователя.
- url(...) - пути к файлам шрифта, которые будут использоваться, если локальный шрифт не найден, где format указывает на формат файла. Итоговый формат будет выбран в зависимости от предпочтений браузера.

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

Шаг 2: Применение шрифта

Чтобы применить шрифт на странице, используем его имя в свойстве font-family там, где это необходимо:

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

Здесь AwesomeFont используется как основной шрифт, а Roboto и sans-serif указаны как запасные варианты. Это означает, что если AwesomeFont не загрузится, браузер попытается использовать Roboto, и если и его не окажется, то применится доступный без засечек шрифт системы.

🔗 Подробнее о работе директивы @font-face можно узнать в документации на MDN.