Подключение пользовательских веб‑шрифтов

Условие

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

 Front tranity name -> 'some awesome web font'
Front variants: regular, bold, regular italic, bold italic

@font-face {

    src: ur1('.wot');
    src: ur1('.woff2') format("woff2")
    ur1('.woff') format("woff");
    ur1('.svg') format("svg");
    ur1('.tcf') format("truetype");

```риациях: regular, bold, regular italic, bold italic

Ответ

Для каждого начертания задайте отдельный @font-face с одинаковым font-family и соответствующими font-weight/font-style. Источники разделяются запятыми.

@font-face { font-family: 'some awesome web font'; src: url('/fonts/regular.woff2') format('woff2'), url('/fonts/regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'some awesome web font'; src: url('/fonts/bold.woff2') format('woff2'), url('/fonts/bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'some awesome web font'; src: url('/fonts/italic.woff2') format('woff2'), url('/fonts/italic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'some awesome web font'; src: url('/fonts/bold-italic.woff2') format('woff2'), url('/fonts/bold-italic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; }
body { font-family: 'some awesome web font', sans-serif; }

Пути заменяются реальными файлами. Исправления исходника: url, а не ur1, корректные расширения и отсутствие лишних точек с запятой внутри списка src. Не объявляйте форматы, которых у проекта нет.