Не могу адекватно интегрировать шрифты Nuxt3?

Question

[Masthead]

Приложении на Nuxt3

@font-face {
  font-family: Junegull;
  src: url('/fonts/junegull-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: Junegull, 'sans-serif';
}

Подключил шрифт, все работает но есть одно но - при релоуде страницы - текст мерцает.

Проблема заключается в том, что сначала на странице рисуется fallback шрифт и только после загрузки "моего" шрифта он ставится на место, тем самым производя мерзкое "мерцание".

Кто-нибудь сталкивался с таким? Как решить проблему мерцания текста? Может быть какие-то плагины или шрифты впринципе на ssr фреймворках нужно ставить иначе, но я вообще нигде не нашел инфы.

Comments

[Wispik]

Попробую угадать. Ты обновляешь страницу с открытым devtools, где отключён кэш

Answer 1

[Masthead]

Как ни странно, оказалось все куда проще чем я думал.

if (process.server) {
      useHead({
        link: {
          rel: 'preload',
          href: '/fonts/junegull-regular.woff2',
          crossorigin: '',
          as: 'font',
          type: 'font/woff2',
        },
      })
    }

Я просто подгрузил шрифт через head и все заработало, мерцать перестало.

Comments

[Aetae]

Если nuxt не подумал за тебя и не делает какие-то магические вещи под капотом, то поможет весьма условно. Т.е. да, если раньше шрифты грузились только с css, то теперь начинают заранее и параллельно, однако это не отменяет всего остального. Включи в консоли троттлинг скорости загрузки и всё вернётся.

Answer 2

[Aetae]

Шрифты всегда и везде мерцают если не в кэше. Единственный способ надёжно избежать этого - ничего не показывать пока шрифт не загрузится - т.е. отображать лоадер или ещё что. "Не надёжно" это можно сделать просто поигравшись со свойством font-display.
Наверняка же дождаться загрузки помогут соответствующие библиотеки, например webfontloader или напрямую Font Loading API.

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

К сожалению из-за cache partitioning в современных браузерах использование всяких cdn для шрифтов, делу никак не поможет, т.к. для каждого сайта всё равно своё кэш.

Answer 3

[Юрий Кравчук]

Всё было написано выше.

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