Про ускорение загрузки и отрисовки шрифтов

Загрузка

Для ускорения загрузки шрифта следует использовать отдельный атрибут link с атрибутами rel="preload" и as="font". Поддержка браузерами небольшая, но атрибуты никому не мешают.

<link rel="preload" href="src-font.woff" as="font">

Preload (предзагрузка) - это будущий стандарт WRC, предназначенный для улучшения производительности и предоставления разработчиком более точного контроля над загрузкой ресурсов.

Отрисовка

Для немедленного пояления текста на странице (FOUT) следует применять css свойство font-display со значениями swap или optional.

• swap означает, что если шрифт не загружен, то любой элемент, который пытается его использовать, должен быть отрендерен запасным шрифтом. Как только шрифт успешно загружается, то элемент перерисовывается загруженным шрифтом.
• optional означает, что браузер пытается отрисовать элемент условно шрифтом из кэша, если не получается, то использует запасной шрифт, а необходимый шрифт ставит на загрузку, чтобы при открытии новой страницы взять шрифт из кэша.

Свойство работает только с новыми браузерам

font-display: swap;
font-display: optional;

Почитать:

• Для чего стоит использовать предварительную загрузку?