Anonymous24
@Anonymous24
Понедельник, это как вторник, но только вчера.

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

В процессе верстки возникла проблема, а именно: после подключения новых шрифтов (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?
  • Вопрос задан
  • 63 просмотра
Решения вопроса 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
экспериментируй с font-display https://developer.mozilla.org/ru/docs/Web/CSS/@fon...
swap - как раз и делает что загружает любой шрифт который может, а потом подменяет на нужный
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы