Ответ
- FOUT (Flash of Unstyled Text) – браузер показывает системный шрифт до загрузки кастомного. Решение:
font-display: swapв@font-face. - FOIT (Flash of Invisible Text) – текст не отображается, пока шрифт не загрузится. Тоже решается
font-display: swap. - Разные форматы шрифтов – для кроссбраузерности нужно подключать несколько форматов (WOFF2, WOFF, TTF).
- Большой размер файла – оптимизация через подмножество глифов (например,
unicode-range) или сжатие. - CORS – если шрифты на другом домене, нужны правильные заголовки.
Пример подключения:
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff');
font-display: swap;
}Ответ 18+ 🔞
Слушай, а вот эта хуйня с веб-шрифтами — это просто отдельный вид адского цирка. Сидит верстальщик, пьёт кофе, думает, какой бы элегантный font-weight: 300 прихуячить, а у пользователя вместо текста — или пустота, или, что хуже, системный Tahoma ебёт глаза.
Первая засада — FOUT (Flash of Unstyled Text). Это когда браузер, такой умный, сначала показывает текст тем, что у него под рукой (читай: тем, что в системе есть), а потом, когда твой красивый шрифт доползёт, резко его подменяет. Страница дёргается, как будто её током хуярит. Вторая — FOIT (Flash of Invisible Text). Это ещё веселее: браузер такой гордый, мол, я буду ждать твой дизайнерский перл, и пока он грузится, пользователь пялится в пустые белые квадраты. Сидит и думает: «Интернет сломался, нахуй?».
Решение-то, в общем, простое, как три копейки. В объявлении @font-face надо прописать font-display: swap;. Это как сказать браузеру: «Не будь идиотом, покажи хоть что-то системное, а как моё приедет — подменишь, и все довольны».
Ну и дальше по списку. Чтобы этот ваш шрифт везде работал, его надо накормить браузеру в разных форматах. Сейчас золотой стандарт — WOFF2, он лучше всех сжат. На всякий пожарный добавляешь WOFF для совсем древних, но ещё живых зверьков. TTF — это уже для совсем археологических раскопок, но иногда и его просят.
С размером — отдельная песня. Дизайнер принёс шрифт на 2 мегабайта, в котором есть и кириллица, и какая-то хуйня вроде вьетнамских диакритических знаков, которые тебе нахуй не сдались. Решение — unicode-range. Этой магической директивой ты говоришь браузеру: «Грузи только кириллические символы, а всю остальную экзотику, если она вдруг понадобится, потом докачаешь». Экономия — овердохуищная.
И последнее, но не по важности — CORS. Если шрифты лежат на другом домене (например, на CDN), а сайт на твоём, то сервер, отдающий шрифты, должен посылать правильные заголовки (Access-Control-Allow-Origin: *), иначе браузер возьмёт и нахуй его заблокирует. Будет в консоли красная ошибка, а на сайте — пустота. Красота, ёпта.
Вот, смотри, как это всё в коде выглядит, если собрать в кучу:
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2'),
url('font.woff') format('woff');
font-display: swap; /* Главная панацея от FOUT/FOIT */
font-weight: 400;
/* unicode-range: U+0400-04FF; // Если хочешь только кириллицу */
}Вот и вся магия. Сделал так — и пользователь не успеет подумать «чё за пиздец», как текст уже на месте. А волнение ебать — ноль.