На сегодняшний день мне лично известно 7 способов загрузки шрифтов. Там есть даже способы с созданием собственного загручика на javascript с использованием FontFaceObserver. Давайте попробуем найти идеальный способ загрузки шрифтов, который будет оптимально сочетать в себе простоту использования и эффективность. Да шучу. Не буду вас утомлять потоком нудной информации, типа такой способ грузит шрифты за 2 секунды, а такой — за 5. Я всё проверил и скажу какой способ я выбрал для себя и почему.

Существующие способы можно разделить на два типа:

1. Блокирующие загрузку — т.е пока шрифт не загрузился пользователь не видит вообще ничего, кроме белого экрана;
2. Показывающие сначала системный шрифт, а после загрузки — ваш загруженный

От первой группы я сразу отказался. Наивно полагать, что пользователь при низкой скорости интернета будет смотреть на белый экран и чего-то ждать. Нет, конечно. Он решит, что ваш сайт не работает и уйдёт. Кстати, в эту группу попали и варианты с собственным загрузчиком на javascript. Можно, конечно, показывать пользователю какую-нибудь анимацию типа «подождите, щас всё будет», но это, в любом случае, слишком трудозатратно. Как говорится, овчинка выделки не стоит.

Вторая группа, как мне кажется, предлагает разумный компромисс между сложностью использования и эффективностью. Поэтому для своих проектов я остановился на таком варианте:

1. Сохраняем необходимые шрифты в формате WOFF2 и WOFF
2. Делаем предзагрузку для каждого шрифта — <link rel="preload" as="font" type="font/woff2" href="your/path/font-name.woff2" crossorigin/>
3. В css в декларацию @font-face добавляем свойство font-display: swap
4. Используем font-family как обычно

Такой способ отлично работает (особенно на больших страницах). При медленном соединении пользователи сначала увидят системный шрифт, а после загрузки шрифта он поменяется на загруженный. Но я не вижу в этом большой проблемы. Главное, что им сразу будет доступна информация. А ведь на ваш сайт они пришли именно за ней.