Страница выглядела так, будто набрана Times New Roman, хотя в стилях была подключена совсем другая гарнитура. Внешний шрифтовой CDN отвечал шесть секунд, а часть файлов не доезжала вовсе — молча, без единой ошибки в консоли.
Коварство в том, что @font-face откатывается на запасную
гарнитуру без всякого шума. Смотришь в панель сети: CSS пришёл, статус 200,
всё хорошо. А woff2 по ссылке из этого CSS — не пришёл.
Проверять не запрос, а факт загрузки
document.fonts.check('16px "Имя гарнитуры"')Вот это отвечает на нужный вопрос: доступна ли гарнитура прямо сейчас. Всё остальное — косвенные признаки.
Вывод
Шрифты лежат рядом со страницей, отдаются с того же адреса, что и всё
остальное. Минус один внешний источник отказа, минус утечка визитов на чужой
сервер, плюс предсказуемая отрисовка. Заодно и запасную гарнитуру в
font-family надо писать осмысленную, а не только на случай
катастрофы.