Как работает метод font-face в HTML для интеграции пользовательских шрифтов?

Метод @font-face в HTML позволяет подключать пользовательские шрифты. html5book.ru Браузер загружает шрифты в кэш и использует их для оформления текста на странице. html5book.ru

Чтобы подключить шрифт с помощью правила @font-face, нужно: html5book.ru

1. Загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами. html5book.ru
2. Указать название шрифта. html5book.ru Оно может отличаться от настоящего названия шрифта. doka.guide
3. Прописать ссылку на файл и задать описание шрифта. html5book.ru
4. Добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом. html5book.ru

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

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