Оптимизация шрифтов

82% веб-страниц для десктопов используют веб-шрифты. Пользовательские шрифты важны для брендинга, дизайна и кросс-браузерной/кросс-устройственной согласованности вашего сайта. Однако использование веб-шрифтов не должно происходить за счёт производительности.

Next.js имеет встроенную Автоматическую оптимизацию веб-шрифтов, которая встраивает CSS для шрифтов во время сборки, устраняя дополнительный цикл запроса для получения объявлений шрифтов. Это приводит к улучшению показателей First Contentful Paint (FCP) и Largest Contentful Paint (LCP).

Например, вот как выглядит процесс оптимизации шрифтов в Next.js до и после.

До оптимизации требуется дополнительный сетевой запрос:

<link href="https://fonts.googleapis.com/css2?family=Inter" rel="stylesheet" />

После оптимизации Next.js автоматически встраивает CSS для шрифтов:

<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal; }
</style>