Web-it-blog/26.09.16

Загрузка шрифтов с font-display.

Сегодня мы с вами поговорим о таком замечательном свойстве CSS, как font-display, благодаря которому вы сможете контролировать отображение шрифта на сайте во время загрузки страницы. Это достаточно новое свойство, которое было впервые использовано в Chrome 49, а затем стало доступно в Opera и версии Opera для Андроид. Пока что font-display доступен не во всех браузерах, но все же о нем стоит упомянуть

font-display по полочкам.

Используется font-display внутри объявления @font-face и состоит из следующих значений:

Теперь, когда вы узнали, составляющие font-display, вы можете использовать его внутри объявления @font-face, как показано ниже.

@font-face {
	font-family: "Roboto";
	font-weight: 300;
	src: url("fonts/Roboto.woff2") format("woff2");
	font-display: swap;
}

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

Проблему с кроссбраузерностью можно исправить, если подключить специальный скрипт на JS, который будет добавлять свойство font-display в браузерах, в которых он не поддерживается. Сам скрипт, я думаю, вы и сами сможете найти, благо это не так сложно.