Какие знаешь проблемы при подключении шрифтов

«Какие знаешь проблемы при подключении шрифтов» — вопрос из категории CSS, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

  1. FOUT (Flash of Unstyled Text) – браузер показывает системный шрифт до загрузки кастомного. Решение: font-display: swap в @font-face.
  2. FOIT (Flash of Invisible Text) – текст не отображается, пока шрифт не загрузится. Тоже решается font-display: swap.
  3. Разные форматы шрифтов – для кроссбраузерности нужно подключать несколько форматов (WOFF2, WOFF, TTF).
  4. Большой размер файла – оптимизация через подмножество глифов (например, unicode-range) или сжатие.
  5. CORS – если шрифты на другом домене, нужны правильные заголовки.

Пример подключения:

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff');
  font-display: swap;
}