Какие форматы шрифтов поддерживают современные браузеры

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

Если вы подключаете шрифт к современному сайту, выбирайте WOFF2. Этот формат специально предназначен для веба, хорошо сжимается и уменьшает объём загрузки по сравнению с исходными файлами шрифта. WOFF можно использовать как резервный вариант, а TTF и OTF — хранить как исходники или применять там, где важна совместимость с программами, а не только с браузером.

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

WOFF2 — наиболее практичный формат для веб-шрифтов. Он использует эффективное сжатие и обычно позволяет передавать меньше данных, чем TTF или OTF. Благодаря этому текст быстрее получает нужное начертание, особенно на мобильных устройствах и при медленном соединении. WOFF2 поддерживается актуальными версиями основных браузеров, поэтому для большинства новых проектов это формат по умолчанию.

WOFF2 не является отдельным художественным вариантом шрифта. Это веб-контейнер, внутри которого находятся данные шрифтового файла. Если вам нужны обычное, полужирное и курсивное начертания, для каждого варианта обычно создают отдельный файл WOFF2 и подключают его через разные правила font-face.

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

TTF и OTF — распространённые форматы шрифтов для операционных систем, графических редакторов и офисных приложений. Браузеры умеют загружать их через CSS, но для веба такие файлы часто оказываются избыточными по размеру. Кроме того, исходный файл может содержать дополнительные таблицы и символы, которые не нужны на странице.

OTF может использовать разные технологии описания контуров, а TTF традиционно ассоциируется с TrueType-структурой. На практике название расширения не гарантирует одинаковую внутреннюю структуру или одинаковый объём. Перед публикацией проверьте файл в браузере и, если возможно, экспортируйте оптимизированную веб-версию в WOFF2.

EOT создавался для старых версий Internet Explorer и не нужен современным сайтам, если проект не обязан поддерживать древние корпоративные окружения. SVG-шрифты также относятся к устаревшему веб-стеку. Подключать SVG только ради расширенного списка форматов не стоит: это усложняет CSS и не даёт практической пользы для актуальных браузеров.

Браузер сопоставляет правило font-face с текстом на странице. Он учитывает семейство шрифта, начертание, насыщенность и диапазон символов. Затем выбирает подходящий источник из списка src. Если первый формат не подходит, браузер может перейти к следующему источнику. Поэтому порядок файлов важен: более современный и компактный WOFF2 обычно ставят перед WOFF и другими резервными вариантами.

Само расширение файла не заменяет корректное описание формата. В CSS желательно указывать значение format, чтобы браузер заранее понимал, с каким типом ресурса работает. Это помогает рациональнее выбирать источник и не тратить время на неподходящий файл. Сервер также должен отдавать шрифты с корректным MIME-типом и разрешать их загрузку с нужного домена.

Для базового подключения используйте правило font-face. В нём задаются имя семейства, путь к файлу, тип формата и начертание. Название семейства внутри CSS может отличаться от имени файла, но должно быть одинаковым во всех правилах одного шрифта. В результате браузер сможет применить нужное начертание к заголовкам и основному тексту.

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

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

Если сайт рассчитан на русский язык, проверьте наличие кириллицы. Латинский файл может выглядеть корректно в английском заголовке, но заменить нужные символы системным шрифтом в русском тексте. Для многоязычных проектов полезно разделять наборы символов: отдельные файлы для кириллицы и латиницы могут уменьшить объём загрузки при использовании unicode-range.

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

Если CSS объявляет файл обычного начертания как 700, браузер считает его полноценным полужирным шрифтом. Визуально буквы могут стать слишком тяжёлыми, а переносы и ширина строк — измениться. Подключайте только реальные веса или осознанно используйте font-synthesis, если искусственное начертание допустимо для конкретного интерфейса.

Сетевой шрифт может временно не загрузиться из-за ошибки сервера, блокировщика или ограничений сети. Поэтому в font-family указывают резервную категорию, например sans-serif или serif. Запасной шрифт не должен разрушать композицию: заранее проверьте длину заголовков, высоту кнопок и переносы на узком экране.

Шрифт может не примениться даже при безошибочном CSS, если путь к файлу указан неверно или сервер запрещает загрузку ресурса с другого домена. В консоли браузера ищите ошибки сети, политики CORS и ответа сервера. Проверьте также, что файл действительно доступен по указанному адресу и не возвращает HTML вместо шрифта.

Для большинства новых сайтов лучшим выбором является WOFF2. Он специально предназначен для веб-передачи и обычно занимает меньше места, чем TTF или OTF. WOFF можно добавить вторым источником, если проект должен учитывать более старые браузеры или заранее определённые требования заказчика.

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

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

Чаще всего выбранный файл не содержит кириллических символов или подключено не то начертание. Проверьте состав глифов, путь к файлу и значение font-family. Если используется подмножество шрифта, убедитесь, что в нём присутствуют русские буквы, цифры и знаки препинания, необходимые конкретной странице.

Один файл можно использовать только для тех начертаний, которые он действительно содержит. Если в нём есть variable font с диапазоном насыщенности, его можно подключить как вариативный шрифт и задать допустимый диапазон. Обычный файл с одним весом не заменяет отдельные варианты 400, 500 или 700 без потери качества.

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

Современные браузеры поддерживают WOFF2, WOFF, TTF и OTF, но практический стандарт для веба — оптимизированный WOFF2. Выбирайте только нужные начертания и языковые наборы, проверяйте кириллицу, резервный шрифт, пути к файлам и настройки сервера. Такой подход сокращает загрузку и помогает сохранить предсказуемую типографику.