Как проверить комплект TTF и WOFF2 после сборки: совпадает ли набор знаков

После сборки шрифта часто появляется пара файлов: TTF для установки на компьютер и WOFF2 для веб-страницы. Проверьте не только, что оба файла существуют и открываются, но и что в них одинаково доступны нужные символы и не потерялись последние изменения. Для этого сравните карту знаков, откройте пару контрольных строк в целевых средах и отдельно испытайте загрузку WOFF2 через браузер.

TTF и WOFF2 — разные упаковки данных шрифта. WOFF2 предназначен для эффективной передачи веб-шрифтов; его формат описывает W3C. При этом расширение файла не гарантирует, что браузер действительно получил именно этот файл: мешать могут неверный адрес в CSS, устаревший кэш, ошибка ответа сервера или сбой при подготовке файла. Проверка одного TTF не заменяет проверку веб-версии.

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

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

Перед экспортом составьте короткую ведомость того, что обязано присутствовать в готовом шрифте. Запишите версию или дату сборки, внутреннее семейное имя, ожидаемые начертания и список важных символов. В список стоит включить не только буквы, но и знаки, ради которых делалась последняя правка: например, «ё», «й», кавычки-ёлочки, дефис, тире и знак рубля.

Ведомость — это контрольный ориентир, а не описание всех символов шрифта. Достаточно двух-трёх строк, где важные знаки встречаются в контексте: «Ёжик съел яблоко», «Цена — 1 250 ₽», «„Текст“ — пример». Для многоязычного проекта добавьте короткие фразы на каждом нужном языке. Отдельно запишите, какой набор должен быть доступен на сайте: если в проекте намеренно используется подмножество символов, отсутствие остальных букв не является ошибкой.

Не меняйте имя файлов вручную так, чтобы оно создавало впечатление новой версии, если внутри всё ещё старые данные. Сохраните результаты одной сборки в отдельной папке, например build-04/, и держите рядом ведомость с датой и заметкой о последнем исправлении. Если вы экспортировали повторно, не подменяйте контрольный экземпляр до завершения проверки.

Откройте оба файла в просмотрщике шрифтов или редакторе, который показывает семейное имя, начертание, версию и карту символов. Названия полей зависят от программы; задача — убедиться, что TTF и WOFF2 относятся к одному семейству и одной редакции, а не к старой и новой сборкам. Проверка одного только имени файла этого не подтвердит: пользовательское имя файла можно задать отдельно.

Затем найдите в таблице символов знаки из ведомости. Для каждого сопоставьте не просто наличие похожего рисунка, а кодовую точку и ожидаемое начертание. Например, обычный дефис и длинное тире — разные знаки; визуальное сходство двух букв также не означает совпадения кода. Если просмотрщик не открывает WOFF2 напрямую, используйте надёжный инструмент, который умеет читать этот формат, либо локально распакуйте его и проверьте полученный шрифт. Не конвертируйте файл через случайный сайт с конфиденциальным или коммерческим материалом.

Сравнение карт лучше выполнять на тех же выбранных символах, а не по числу глифов, показанному разными программами. Один инструмент может считать служебные или пустые глифы, другой — показывать только назначенные Unicode знаки. Важен ответ на практический вопрос: присутствует ли каждый нужный знак под ожидаемой кодовой точкой в обеих версиях?

Создайте один контрольный текстовый файл и откройте его в двух местах: в редакторе, где установлен TTF, и в тестовой веб-странице с WOFF2. Используйте одинаковые строки, размер, начертание и содержимое. Текст должен выявлять характерные проблемы, а не только красиво демонстрировать алфавит.

Подготовьте три строки:

Убедитесь, что приложение действительно выбрало нужное семейство и начертание. Системное меню шрифтов может содержать похожие названия или дубликаты предыдущего экспорта. Для надёжности временно отключите старую копию либо используйте чистую тестовую среду. После выбора шрифта проверьте несколько строчных и прописных символов, интервалы и строку целиком: отсутствие пропусков не гарантирует, что результат соответствует новой сборке.

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

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

.sample { font-family: "TestFont", sans-serif; }

Имя в font-family — метка CSS, а имя файла в url() — фактический адрес ресурса относительно CSS-файла или абсолютный URL. Если адрес указан с неверным регистром, пробелом или папкой, браузер не найдёт файл даже при правильном содержимом WOFF2. Временно оставьте запасное семейство после запятой, но проверяйте, какой именно шрифт реально отрисовал страницу.

Откройте инструменты разработчика и перезагрузите тестовую страницу. Во вкладке Network найдите запрос к файлу .woff2. Сначала убедитесь, что запрос вообще появился, затем проверьте адрес и результат ответа. Успешно загруженный ресурс ещё не доказывает, что текст использует его: неверно заданные font-family, font-weight или font-style могут заставить браузер выбрать запасное начертание.

Если запрос получил 404, проверьте относительный путь и фактическое расположение CSS и шрифта. Если в ответ пришла HTML-страница ошибки или авторизации вместо двоичных данных, адрес тоже нужно исправить. При размещении на другом домене проверяйте сообщения о CORS: сервер должен разрешать нужной странице получать ресурс. Заголовок типа содержимого font/woff2 полезен при диагностике конфигурации сервера; поведение браузера зависит также от корректности содержимого и запроса, поэтому не сводите любую проблему только к MIME-заголовку.

Ошибки в консоли часто позволяют разделить причины. Сетевой отказ, запрет доступа и ошибка декодирования — разные сигналы. Запишите точное сообщение и URL, затем меняйте только один параметр за раз. Например, сначала исправьте путь и повторите загрузку, после чего исследуйте содержимое файла. Если одновременно заменить файл, CSS и настройки сервера, станет сложнее понять, что именно решило проблему.

После повторного экспорта жёстко обновите страницу или временно меняйте имя файла на уникальное для теста. Кэш может показывать прежний экземпляр, хотя на сервер уже загружена новая копия. Для постоянной публикации используйте версионирование URL или механизм обновления кэша, принятый в проекте; случайные query-параметры не должны становиться единственным способом управления релизами.

Сопоставьте результат с симптомом. Если контрольный знак отсутствует и в установленном TTF, и в успешно загруженном WOFF2, вернитесь к исходным контурам, карте кодовых точек и параметрам сборки. Если знак есть в TTF, но отсутствует в WOFF2 по тому же Unicode, заново экспортируйте обе версии из одной подтверждённой сборки и проверьте инструмент чтения WOFF2. Не исправляйте проблему заменой знака на внешне похожий символ: при поиске, копировании и обработке текста различие останется.

Если символы в обоих файлах присутствуют, но веб-страница показывает запасной шрифт, сначала исследуйте Network, CSS и кэш. Если браузер загрузил ресурс, а выглядит иначе, проверьте фактически применённое семейство, вес и стиль, а также кодовые точки тестового текста. Если только часть знаков отличается, сравните их по отдельности: несколько букв могут быть отрисованы резервным шрифтом, когда соответствующего символа нет в WOFF2.

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

**Сравнивать только размер файла.** WOFF2 обычно меньше TTF, но размер не подтверждает совпадение знаков или актуальность версии. Это свойство упаковки, а не тест полноты.

**Считать открытие в просмотрщике полным доказательством.** Оно подтверждает, что инструмент смог прочитать файл, но не что браузер загрузил его по нужному адресу и применил к странице.

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

**Сверять только общий счётчик глифов.** Разные просмотрщики могут учитывать служебные и пустые глифы по-разному. Сверяйте нужные Unicode знаки и визуально проверяйте контрольные строки.

**Переименовать файл, не обновив ссылку или кэш.** Если CSS продолжает запрашивать прежний URL, новая версия не используется. Проверяйте URL в Network, а после выпуска управляйте кэшем последовательно.

### Должны ли TTF и WOFF2 выглядеть совершенно одинаково?

Для одного и того же шрифта ожидается согласованный набор знаков и начертаний, но рендеринг может слегка различаться между операционными системами, браузерами и размерами. Сравнивайте наличие кодовых точек и форму букв в сопоставимых условиях, а не пиксельное совпадение скриншотов.

### Можно ли проверить WOFF2 без сайта?

Да. Откройте локальную HTML-страницу с @font-face и адресом на локальный файл, запустив страницу через локальный HTTP-сервер. Это проверит чтение WOFF2 и CSS-ссылку, но отдельная проверка на целевом сервере всё равно нужна для путей, доступа, CORS и кэша.

### Почему в браузере видны почти все буквы, кроме одной?

Часть знаков может отображаться запасным шрифтом, пока остальные берутся из WOFF2. Проверьте проблемную букву по Unicode и отключите fallback в тестовой странице. Также убедитесь, что браузер использует правильный URL и не загружает подмножество шрифта без этой буквы.

### Нужен ли отдельный WOFF2 для каждого начертания?

Если проект выпускает несколько статических начертаний, странице нужен доступ к тем файлам и весам, которые она объявляет в CSS. Один файл не становится автоматически жирным или курсивным. Сопоставьте имена файлов и описания font-weight и font-style с фактически экспортированными начертаниями.

### Что делать, если TTF открывается, а WOFF2 — нет?

Сначала проверьте WOFF2 в другом инструменте, поддерживающем формат, чтобы исключить ограничение конкретного просмотрщика. Затем пересоздайте веб-файл из подтверждённой сборки и сравните символы ведомости. Если файл не читается несколькими инструментами, не публикуйте его до повторного экспорта.

### Нужно ли удалять старый шрифт перед тестом?

Если старая и новая версии имеют одинаковое внутреннее имя, временно отключите старую копию или проверяйте в чистой среде. Иначе приложение может выбрать установленную ранее редакцию, хотя вы открыли новый файл. В финальном тесте зафиксируйте, какую именно сборку установили.

Надёжная проверка пары TTF и WOFF2 состоит из трёх частей: сверить нужные кодовые точки, сравнить одни и те же контрольные строки и подтвердить в браузере фактическую загрузку веб-файла. Сохраните ведомость рядом с результатами сборки — так легче повторить диагностику после правки. Когда рукописный набор готов, его можно собрать в шрифт на Fontgenerator, а затем проверить по этому же списку.

**Источник формата:** <https://www.w3.org/TR/WOFF2/> — спецификация WOFF2 от W3C.