Шрифты: подключение и обработка

Parcel обрабатывает шрифты как часть системы ассетов, автоматически включая их в граф зависимостей и выполняя оптимизацию при сборке. Любой файл шрифта — .woff, .woff2, .ttf, .otf, .eot — рассматривается как модуль, который может быть импортирован из JavaScript, CSS или HTML.

В Parcel шрифты не требуют отдельной конфигурации загрузчиков. Достаточно указать путь к файлу, и сборщик сам:

  • определит тип ресурса;
  • включит файл в граф зависимостей;
  • выполнит хеширование имени для кеширования;
  • оптимизирует выдачу в production-сборке.

При обращении к файлу из CSS или JS Parcel преобразует его в корректный URL относительно итогового бандла.

Подключение шрифтов через CSS и @font-face

Наиболее распространённый способ — использование правила @font-face. Parcel корректно анализирует пути внутри CSS и заменяет их на обработанные URL.

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.woff2") format("woff2"),
       url("./fonts/Inter-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

При сборке Parcel:

  • перемещает файлы шрифтов в директорию выходной сборки;
  • переименовывает их с добавлением хеша;
  • обновляет ссылки внутри CSS.

Результирующий CSS может содержать что-то вроде:

src: url("/Inter-Regular.a1b2c3.woff2") format("woff2");

Подключение шрифтов через JavaScript

Parcel позволяет импортировать шрифты напрямую в JS, что полезно при динамической загрузке или предзагрузке ресурсов.

import interWoff2 from "./fonts/Inter-Regular.woff2";
import interWoff from "./fonts/Inter-Regular.woff";

Полученные значения — это строки с URL, которые можно использовать в стилях или для создания FontFace:

const font = new FontFace("Inter", `url(${interWoff2}) format("woff2")`);

font.load().then(() => {
  document.fonts.add(font);
  document.body.style.fontFamily = "Inter, sans-serif";
});

Parcel автоматически обработает импортируемые файлы и включит их в сборку.

Форматы шрифтов и приоритет загрузки

Современные проекты обычно используют несколько форматов шрифтов для совместимости:

  • woff2 — основной формат, оптимальный по размеру;
  • woff — резерв для старых браузеров;
  • ttf/otf — используются редко, чаще как исходники.

Parcel не требует ручной настройки приоритета, но порядок в src внутри @font-face влияет на выбор браузера.

src: url("./font.woff2") format("woff2"),
     url("./font.woff") format("woff");

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

Parcel автоматически применяет хеширование к именам файлов. Это позволяет:

  • безопасно использовать долгосрочное кеширование;
  • обновлять шрифты только при изменении содержимого;
  • избегать конфликтов имен.

Пример выходной структуры:

dist/
 ├── index.html
 ├── app.8f3a21.js
 ├── Inter-Regular.3d91ab.woff2
 └── Inter-Regular.91c0fe.woff

Хеш в имени генерируется на основе содержимого файла.

Обработка шрифтов в HTML

Шрифты могут подключаться и через HTML, например через link preload:

<link
  rel="preload"
  href="./fonts/Inter-Regular.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

Parcel также обрабатывает такие пути, заменяя их на финальные URL после сборки. Это позволяет заранее загружать критические шрифты и снижать CLS (Cumulative Layout Shift).

Использование шрифтов через CSS-переменные

Parcel не ограничивает способ использования шрифтов после подключения. Часто применяется подход с CSS-переменными:

:root {
  --font-main: "Inter", system-ui, sans-serif;
}

body {
  font-family: var(--font-main);
}

Такой подход упрощает смену типографики и централизует управление стилями.

Импорт шрифтов как часть структуры проекта

Parcel поддерживает организацию шрифтов внутри проекта без дополнительных конфигураций:

src/
 ├── assets/
 │   └── fonts/
 │       ├── Inter-Regular.woff2
 │       ├── Inter-Bold.woff2
 │       └── Inter-Italic.woff2
 ├── styles/
 │   └── main.css
 └── index.js

Любой файл, на который есть ссылка из CSS или JS, автоматически включается в сборку.

Инлайн-обработка и ограничения размера

Parcel может инлайнить небольшие шрифты в виде base64, если размер файла ниже порога, заданного конфигурацией. Это уменьшает количество HTTP-запросов.

Поведение зависит от режима сборки и настроек проекта, но в стандартной конфигурации:

  • маленькие ассеты могут быть встроены в CSS/JS;
  • крупные файлы всегда выносятся отдельно.

Работа с несколькими начертаниями

При использовании семейства шрифтов с несколькими весами каждый файл описывается отдельно:

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Light.woff2") format("woff2");
  font-weight: 300;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Regular.woff2") format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: "Inter";
  src: url("./fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
}

Parcel объединяет эти файлы в единый граф зависимостей, не требуя дополнительных настроек.

Предзагрузка и управление критическими шрифтами

Для улучшения производительности часто используется стратегия критических шрифтов:

  • основной шрифт загружается через preload;
  • второстепенные — лениво или по требованию;
  • fallback-шрифты задаются через CSS.

Parcel корректно обрабатывает пути даже при разделении логики загрузки.

<link rel="preload" href="./fonts/Inter-Regular.woff2" as="font" crossorigin />

Поддержка CSS и PostCSS-интеграции

Parcel автоматически работает с PostCSS, что позволяет использовать дополнительные инструменты для обработки шрифтов:

  • автопрефиксинг;
  • оптимизация путей;
  • модульные стили.

Даже при использовании CSS-модулей ссылки на шрифты остаются валидными и корректно резолвятся.

Поведение в режиме разработки и production

В dev-режиме Parcel:

  • быстро резолвит пути без оптимизации;
  • не выполняет агрессивное кеширование;
  • сохраняет читаемые имена файлов.

В production:

  • включает хеширование;
  • минифицирует CSS;
  • оптимизирует структуру ассетов;
  • разделяет ресурсы для лучшей загрузки.

Такое разделение позволяет сохранять скорость разработки и эффективность итоговой сборки.

Оглавление