Старт любого проекта — ужасная рутина. Даже если у вас есть готовый стартовый шаблон (вроде моего), всё равно нужно писать под каждый проект свои базовые стили, добавлять нужные шрифты и так далее.
В этой заметке я расскажу вам, как облегчить себе жизнь с помощью простой техники организации шрифтов в проекте.
Каждую гарнитуру я храню в отдельной папке с названием, соответствующим имени гарнитуры. Внутри лежат файлы шрифтов, называемые по их начертанию:
/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
на название гарнитуры с прописной и со строчной буквы соответственно.