Optimización de fuentes

El 82% de las páginas web para escritorio utilizan fuentes web. Las fuentes personalizadas son importantes para la identidad de marca, diseño y consistencia entre navegadores/dispositivos de su sitio. Sin embargo, el uso de fuentes web no debería afectar el rendimiento.

Next.js incluye una Optimización automática de fuentes web integrada que incrusta el CSS de las fuentes durante el proceso de construcción, eliminando una solicitud adicional para obtener las declaraciones de fuentes. Esto mejora el First Contentful Paint (FCP) y el Largest Contentful Paint (LCP).

Por ejemplo, aquí se muestra el antes y después de cómo Next.js optimiza sus fuentes.

Antes de la optimización, se requiere una solicitud de red adicional:

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

Después de la optimización, Next.js incrusta automáticamente el CSS de la fuente:

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