Как избавиться от артефакта с подключенным шрифтом при загрузке сайта?

Question

[Анатолий Димов]

В процессе верстки возникла проблема, а именно: после подключения новых шрифтов (Inter и Golos-Text), возникают артефакты при рендинге страницы. То-есть, в течение доли секунды после обновления страницы, я вижу базовый шрифт (Segoe UI), а затем он меняется на тот, который я применил (Inter).

Так выглядит css до подключения новых шрифтов

body {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.58;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	text-size-adjust: 100%;
	text-rendering: optimizeSpeed;
	...
}

Далее, в самом начале CSS документа прописываю правило font-face в итоге конечный CSS выглядит примерно так.

CSS

@font-face {
	font-weight: 400;
	font-family: 'Inter';
	font-style: normal;
	src:
		url(../fonts/inter/Inter-Regular.woff2?v=3.15) format("woff2"),
		url(../fonts/inter/Inter-Regular.woff?v=3.15) format("woff2");
	font-display: swap;
}

body {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.58;
	font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	text-size-adjust: 100%;
	text-rendering: optimizeSpeed;
	...
}

Я буду признателен, если вы подскажите, как избавиться от артефакта, а также поделитесь советами.

P.S Дополнительный вопрос: куда лучше добавить font-face: в css документ или вынести в html > head > style?

Answer 1

[iBird Rose]

экспериментируй с font-display https://developer.mozilla.org/ru/docs/Web/CSS/@fon...
swap - как раз и делает что загружает любой шрифт который может, а потом подменяет на нужный

Comments

[Анатолий Димов]

Что там экспериментировать...
Например в Inter, автор уже дал рекомендацию в css, так как должно быть.
Я побывал менять значения по этой и этой статьях, артефакты остались. В первой статье, советуют подключать через link google fonts. Пфф.

Точно не знаю, но артефакта нет или он не значительный, если прописать правило @font-face не в app.css, а вынести в html > head > style до <link rel="stylesheet" href="app.css">

Интересно, как другие решают эту проблему.

[iBird Rose]

Вася Булка,

вот тут ты сам сказал браузеру подгружать любой шрифт, а потом менять его.

[Анатолий Димов]

iBird Rose, Спасибо... Просто удалил этот параметр и всё как надо.
Артефакта нет: font-display: auto; = font-display: block;