Гарри Робертс написал статью о том, что резервное значение свойства
font-family работает не так, как нам кажется. Поэтому при загрузке страницы на какое-то время текст может отображаться шрифтом Times New Roman, что ухудшает CLS.Обычно базовый шрифт задаётся через
:root, html или body для наследования вглубь дерева. Для заголовков часто шрифт переопределяется на акцентный из шрифтовой пары. Шрифт применяется к заголовкам с использованием селекторов типа или класса: h1, .h1, .heading.:root {
font-family: Inter, system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6, .heading {
font-family: 'Playfair Display';
}Все заголовки должны отображаться как Playfair Display. Это пользовательский шрифт, который должен загрузиться и обработаться браузером. Это происходит не мгновенно, при отрисовке страницы шрифт может быть ещё не готов.
В этом случае браузер будет использовать резервный шрифт, что зависит от свойства
font-display. Чаще всего используется значение swap, при котором резервный шрифт заменяется пользовательским как только тот загрузится.Кажется, что резервным шрифтом должен быть
system-ui и sans-serif. Но это не так. Резервный шрифт берётся из font-family самого заголовка. Указан только Playfair Display, поэтому резервным будет системный шрифт для этого элемента.В большинстве случаев это шрифт Times New Roman. Чтобы избежать его появления, стоит указать резервные варианты, если шрифт переопределяется. А лучше один раз задать пользовательские свойства и использовать их.
:root {
--font-base: Inter, system-ui, sans-serif;
--font-headings: 'Playfair Display', serif;
font-family: var(--font-base);
}
h1, h2, h3, h4, h5, h6, .heading {
font-family: var(--font-headings);
}#css #performance
