font-display: swap — это дескриптор CSS, который управляет тем, как браузер ведёт себя, пока веб-шрифт ещё качается. Что это значит на практике: браузер не прячет текст, а рисует его резервным системным шрифтом немедленно и меняет начертание, как только основной файл загрузится. Дескриптор задаётся внутри правила @font-face рядом с src.
Значение swap напрямую бьёт по Core Web Vitals: пустой блок текста в первые секунды загрузки портит LCP и мешает пользователю читать. Проверить поведение шрифта можно в PageSpeed Insights и во вкладке Network инструментов разработчика — там видно, сколько времени файл шрифта грузится и когда происходит подмена начертания.
§ 01Зачем нужен дескриптор
Без указанного правила загрузки шрифта браузер по умолчанию прячет текст на период до 3 секунд, пока грузится веб-шрифт — это и есть FOIT, эффект невидимого текста. Значение swap сокращает период блокировки почти до нуля: системный шрифт показывается сразу, подмена происходит в фоне. Взамен появляется FOUT — короткая вспышка нестилизованного текста при смене начертания. Для контентных страниц читаемость с первой секунды важнее плавности, поэтому swap берут по умолчанию.
§ 02Как настраивается
Дескриптор прописывается внутри блока @font-face: font-display: swap; ставится рядом с font-family и src. У свойства пять значений: auto, block, swap, fallback, optional — они отличаются длиной периода блокировки и периода подмены. При подключении шрифта через Google Fonts то же поведение включается параметром &display=swap в URL. Локальные шрифты требуют ручной правки CSS.
FOIT −100%, LCP 3.1→2.4 c — Новостной портал на WordPress с 4 весами Roboto подключил font-display:swap и preload для основного начертания. Невидимый текст исчез, LCP упал с 3.1 до 2.4 с за 3 недели. Замер через PSI и CrUX-75th, отказы снизились на 8%.
FCP 2.8→1.9 c — B2B SaaS-лендинг на Next.js с MRR $180k заменил блокирующую загрузку Inter на self-hosted с font-display:swap. Текст стал рендериться сразу системным шрифтом, FCP улучшился с 2.8 до 1.9 с за 4 недели. Динамика по GA4 и Lighthouse CI.
§ 03Как проверить, что работает
Откройте вкладку Network в инструментах разработчика, отфильтруйте по типу Font и перезагрузите страницу с троттлингом сети — на медленном соединении подмена начертания видна глазом. PageSpeed Insights в разделе диагностики отдельно помечает шрифты без правила отображения предупреждением о невидимом тексте. Проверьте, что резервный системный шрифт по метрикам близок к основному: сильная разница в ширине символов вызывает сдвиг макета и портит метрику CLS.
§ 04Подводные камни
FOUT при swap заметнее, если резервный и основной шрифты сильно различаются по начертанию — текст прыгает в момент подмены. Снизить сдвиг помогают дескрипторы size-adjust, ascent-override и подбор близкого системного fallback. Для иконочных шрифтов swap не подходит: вместо иконок мелькнут случайные символы, здесь берут block или optional. Ускорить саму загрузку файла помогает <link rel=preload> для критичных начертаний.