Организация шрифтов в проекте

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

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

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

/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 на название гарнитуры с прописной и со строчной буквы соответственно.