Внутри @font‑face доступно много других свойств для настройки подключения и отображения шрифта

@font‑face. МДН

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

Внутри @font‑face доступно много других свойств для настройки подключения и отображения шрифта

@font‑face. МДН

@font-face {
  font-family: 'MyCustomFont';
  /* В файле начертание c обычной жирностью */
  src: url('./fonts/mcf-regular.woff2') format('woff2');
  /* Файл применится, если в стилях указана обычная жирности шрифта */
  font-weight: 400; 
}
        
body {
  /* Шрифт применится ко всем элементам страницы с обычной жирностью */
  font-family: 'MyCustomFont', system-ui;
}

Дополнительные начертания описываются в отдельных @font-face.

Неправильная работа с начертаниями

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

Нельзя будет комбинировать свойства шрифта, чтобы получить нужное начертание. Не будут работать стандартные стили жирности и курсива, например, у заголовков и тега‑курсива i. Придётся настраивать начертания вручную для каждого типа и сочетания элементов.

Не делайте так:

/* Каша начинается уже в момент объявления начертаний. Чем их больше — тем тяжелее получится код */
@font-face {
  font-family: 'MyCustomFontRegular';
  src: url('./fonts/mcf-regular.woff2') format('woff2');
}
        
@font-face {
  font-family: 'MyCustomFontRegularItalic';
  src: url('./fonts/mcf-regular-italic.woff2') format('woff2');
}
        
@font-face {
  font-family: 'MyCustomFontBold';
  src: url('./fonts/mcf-bold.woff2') format('woff2');
}
        
@font-face {
  font-family: 'MyCustomFontBoldItalic';
  src: url('./fonts/mcf-bold-italic.woff2') format('woff2');
}
        
@font-face {
  font-family: 'MyCustomFontLight';
  src: url('./fonts/mcf-light.woff2') format('woff2');
}
        
@font-face {
  font-family: 'MyCustomFontLightItalic';
  src: url('./fonts/mcf-light-italic.woff2') format('woff2');
}
        
body {
  font-family: 'MyCustomFontRegular', system-ui;
}
        
/* Сразу же появятся громоздкие конструкции с повторами и высоким риском опечаток */
.light {
  font-family: 'MyCustomFontLigth', system-ui;
}
        
.bold {
  font-family: 'MyCustomFontBold', system-ui;
}
        
.italic {
  font-family: 'MyCustomFontRegularItalic', system-ui; 
}
            
/* Вместо использования стандартных стилей, придётся вручную проставлять начертания элементам типографики */
h1,
h2,
h3 {
  font-family: 'MyCustomFontBold', system-ui;
}
        
i,
em {
  font-family: 'MyCustomFontRegularItalic', system-ui;
}
        
/* Отдельный ад — вручную прописывать все возможные комбинации начертаний */  
h1, h2, h3 :is(i, em) {
  font-family: 'MyCustomFontBoldItalic', system-ui;
}
        
.light.italic {
    font-family: 'MyCustomFontLightItalic', system-ui; 
}
        
.bold.italic {
    font-family: 'MyCustomFontBoldItalic', system-ui; 
}

Правильная работа с начертаниями

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

Этот способ дружит с особенностями ЦСС: свойства можно комбинировать, наследовать и переопределять, автоматически получая нужные начертания. Будут работать и стандартные браузерные стили. Так для вложенного в заголовок тега‑курсива i применится жирное курсивное начертание благодаря стандартным свойствам font-weight и font-style у этих элементов. Вам не придётся поддерживать такие случаи вручную.

Делайте так:

@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/mcf-regular.woff2') format('woff2');
  font-weight: 400;
}
        
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/mcf-regular-italic.woff2') format('woff2');
  /* Начертание применится при font-weight: 400 и font-style: italic */
  font-weight: 400;
  font-style: italic;
}
        
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/mcf-bold.woff2') format('woff2');
  font-weight: 600;
}
        
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/mcf-bold-italic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}
        
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/mcf-light.woff2') format('woff2');
  font-weight: 300;
}
        
@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/mcf-light-italic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}
        
body {
  font-family: 'MyCustomFont', system-ui;
}
        
/* Не придётся вручную описывать сочетания классов, ЦСС скомбинирует стили и элемент получит соответствующее начертание */       
.light {
  font-weight: 300;
}
        
.bold {
   font-weight: 600;
}
        
.italic {
  font-style: italic;
}

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы