Подключаешь красивый шрифт с сервера, и на медленном интернете человек первые секунды смотрит на пустые карточки. Браузер прячет текст, пока файл не догрузится, а потом перерисовывает страницу. Если шрифт не часть бренда, файл можно не грузить совсем.
body {
font-family: system-ui, sans-serif;
}system-ui берёт шрифт, который уже стоит у пользователя: San Francisco на macOS и iOS, Segoe UI на Windows, Roboto на Android. Текст виден с первого кадра, и сайт выглядит так же привычно, как приложения в этой системе.На гифке слева карточка ждёт свой шрифт, а справа текст на месте сразу.
На каждой системе шрифт свой, поэтому ширина строк немного гуляет: проверяй вёрстку хотя бы на маке и на Windows.
sans-serif в конце — запасной вариант для старых браузеров.Работает в Chrome 56+, Firefox 92+, Safari 11+.
❤️ — если было полезно
@glo_academy | #snippets