Старт любого проекта — ужасная рутина. Даже если у вас есть готовый стартовый шаблон (вроде моего), всё равно нужно писать под каждый проект свои базовые стили, добавлять нужные шрифты и так далее.

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

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

/fonts/proxima-nova/regular.woff
/fonts/proxima-nova/bold.woff
/fonts/garamond/regular.woff
/fonts/garamond/italic.woff

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

/* Name regular */
@font-face {
  font-family: 'Name';
  src: url('/fonts/name/regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
}

/* Name bold */
@font-face {
  font-family: 'Name';
  src: url('/fonts/name/bold.woff') format('woff');
  font-style: normal;
  font-weight: 800;
}

/* Далее в том же духе */

Как только возникает необходимость подключить какой-то шрифт, просто закидываем его в папку /fonts, а в стилях заменяем все вхождения Name и name на название гарнитуры с прописной и со строчной буквы соответственно.