FOIT и FOUT: почему исчезает текст и как это диагностировать

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

Дата актуальности: 22 июля 2026 года. В современных проектах проблему обычно решают не одним свойством CSS, а сочетанием правильного font-display, компактных файлов, подходящего fallback-шрифта и контроля момента загрузки.

FOIT расшифровывается как Flash of Invisible Text — кратковременное отображение невидимого текста. Браузер знает, что элемент должен использовать веб-шрифт, но файл ещё не готов. Вместо немедленной подстановки другого шрифта он может оставить текст скрытым на некоторое время, чтобы пользователь не увидел промежуточный вариант.

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

Чаще всего FOIT связан с настройкой font-display: block либо с поведением браузера по умолчанию, когда автор явно не указал стратегию показа шрифта. Дополнительные причины — медленный CDN, запрос шрифта после критического CSS, отсутствие предварительной загрузки для действительно важного начертания и неудачная политика кеширования.

FOUT расшифровывается как Flash of Unstyled Text — кратковременный показ текста без нужного оформления. Страница сначала использует резервный шрифт, например системный sans-serif, а после получения файла переключается на фирменное начертание. Сам текст не исчезает, но меняются ширина символов, межстрочные интервалы и переносы.

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

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

После разбора HTML и CSS браузер определяет, какие текстовые элементы используют нестандартный шрифт. Затем он формирует запрос к файлу, проверяет доступность ресурса, получает данные и подготавливает шрифт к отрисовке. До этого момента браузер выбирает поведение, заданное font-display или настройками по умолчанию.

Свойство font-display определяет компромисс между ожиданием и немедленной видимостью текста. Значение block допускает период невидимого текста, swap быстро показывает fallback и затем заменяет его, fallback использует короткое ожидание и ограничивает длительность замены, а optional позволяет браузеру решить, нужен ли веб-шрифт при конкретных условиях. Выбор зависит от роли шрифта: для логотипа и крупного заголовка допустим один сценарий, для основного текста — другой.

Исчезновение текста не всегда означает FOIT. Элемент может быть скрыт правилом display: none, opacity: 0, visibility: hidden или цветом, совпадающим с фоном. Проблема также возникает, если CSS применяет несуществующее семейство, если у текста отсутствует нужный вес или если шрифт содержит повреждённые данные.

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

В объявлении @font-face проверьте имя семейства, диапазон font-weight, стиль font-style и путь к файлу. Если загружается обычное начертание, а элемент запрашивает полужирное, браузер может синтезировать его или ждать другой ресурс. Также проверьте порядок подключения стилей: позднее правило или более специфичный селектор способен отменить ожидаемый font-family.

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

Для веба предпочтителен современный сжатый формат, если он поддерживается целевыми браузерами. Удалите неиспользуемые веса, стили и символы, а для кириллического проекта рассмотрите подмножество, в котором остаются нужные языки и знаки. Не подключайте четыре начертания на первом экране, если видимому контенту требуется только regular и bold.

Убедитесь, что сервер разрешает кеширование неизменяемых файлов и отдаёт корректный Content-Type. Если шрифт размещён на другом домене, настройте CORS так, чтобы браузер мог использовать ресурс. Предварительная загрузка через preload оправдана только для шрифта, который точно понадобится сразу: лишние preload-запросы конкурируют с CSS, изображениями и скриптами.

Главный источник заметного FOUT — не сам факт замены, а различие между шрифтами. Сравните ширину букв, x-height, насыщенность и высоту строки. Если резервный шрифт значительно шире основного, заголовок может занимать больше строк до загрузки веб-шрифта. Для более точного сопоставления используют font-size-adjust, а в современных CSS-сценариях также настраивают ascent-override, descent-override и line-gap-override, если это необходимо для контроля метрик.

Представьте лендинг с заголовком «Создайте собственный шрифт». На быстром соединении он выглядит нормально, но при ограничении скорости сначала появляется системный шрифт, затем заголовок становится уже и переносится иначе. В Network запрос woff2 завершается успешно, а в Computed Styles после загрузки видно нужное семейство. Это не ошибка текста: перед вами FOUT, усиленный различием метрик.

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

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

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

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

Да, swap обычно разрешает показывать текст резервным шрифтом до готовности веб-шрифта, поэтому длительное скрытие букв не становится основным сценарием. Однако swap не устраняет FOUT и не исправляет ошибки пути, CORS, неправильного веса или слишком тяжёлого файла. Его нужно сочетать с оптимизацией ресурсов и настройкой fallback.

Разные шрифты занимают разную ширину при одинаковом размере. Если fallback шире или уже основного начертания, текст переносится на другое количество строк, а высота блока изменяется. Проверьте ширину знаков, x-height, размер шрифта, межстрочный интервал и возможности управления метриками через CSS.

Нет. Preload оправдан для небольшого числа шрифтов, которые гарантированно нужны на первом экране. Если заранее загружать второстепенные или неиспользуемые файлы, браузер потратит приоритетные сетевые ресурсы на них и может позже получить критические CSS, изображения или скрипты.

Обычно браузер сообщает об отказе в консоли, а запрос шрифта во вкладке Network получает ошибку или не используется страницей, хотя файл существует. Проверьте домен страницы, домен файла и заголовок Access-Control-Allow-Origin. Исправлять нужно серверную конфигурацию, а не скрывать текст дополнительным CSS.

FOIT скрывает текст во время ожидания веб-шрифта, а FOUT показывает fallback с последующей заменой. Чтобы устранить проблему, определите сценарий в DevTools, проверьте сетевой запрос и CSS, сократите файлы, настройте font-display и подберите резервный шрифт с близкими метриками. После этого повторите тест на холодном кеше и медленной сети.

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