Как загружать шрифты в 2019
На сегодняшний день мне лично известно 7 способов загрузки шрифтов. Там есть даже способы с созданием собственного загручика на javascript с использованием FontFaceObserver. Давайте попробуем найти идеальный способ загрузки шрифтов, который будет оптимально сочетать в себе простоту использования и эффективность. Да шучу. Не буду вас утомлять потоком нудной информации, типа такой способ грузит шрифты за 2 секунды, а такой — за 5. Я всё проверил и скажу какой способ я выбрал для себя и почему.
Существующие способы можно разделить на два типа:
- Блокирующие загрузку — т.е пока шрифт не загрузился пользователь не видит вообще ничего, кроме белого экрана;
- Показывающие сначала системный шрифт, а после загрузки — ваш загруженный
От первой группы я сразу отказался. Наивно полагать, что пользователь при низкой скорости интернета будет смотреть на белый экран и чего-то ждать. Нет, конечно. Он решит, что ваш сайт не работает и уйдёт. Кстати, в эту группу попали и варианты с собственным загрузчиком на javascript. Можно, конечно, показывать пользователю какую-нибудь анимацию типа «подождите, щас всё будет», но это, в любом случае, слишком трудозатратно. Как говорится, овчинка выделки не стоит.
Вторая группа, как мне кажется, предлагает разумный компромисс между сложностью использования и эффективностью. Поэтому для своих проектов я остановился на таком варианте:
- Сохраняем необходимые шрифты в формате WOFF2 и WOFF
- Делаем предзагрузку для каждого шрифта —
<link rel="preload" as="font" type="font/woff2" href="your/path/font-name.woff2" crossorigin/>
- В css в декларацию
@font-face
добавляем свойствоfont-display: swap
- Используем font-family как обычно
Такой способ отлично работает (особенно на больших страницах). При медленном соединении пользователи сначала увидят системный шрифт, а после загрузки шрифта он поменяется на загруженный. Но я не вижу в этом большой проблемы. Главное, что им сразу будет доступна информация. А ведь на ваш сайт они пришли именно за ней.