Integración de Fuentes Optimizadas en Next.js

Métodos para integrar y optimizar la fuente Poppins en aplicaciones Next.js con Page Router y Tailwind CSS, mejorando el rendimiento y la experiencia visual.

6 min de lectura
Por Equipo 10xDev

Esta documentación describe la forma más óptima de integrar la fuente Poppins en una aplicación de Next.js 15 utilizando el Page Router y Tailwind CSS, priorizando el rendimiento y la optimización.

Método 1: Usando next/font (Recomendado para Optimización)#

Next.js tiene una forma optimizada de cargar fuentes web que mejora el rendimiento al evitar el bloqueo de renderizado y optimizar la carga de los archivos de fuente.next/font es la forma moderna y recomendada.

Instala next/font:#

Importa y configura la fuente en un componente (generalmente layout.js o

_app.js):

En tu archivo pages/_app.js (si tienes uno personalizado) o en el layout.js dentro de tu directorio pages, importa la función Poppins desde @next/font y configúrala:

O si estás usando un layout.js dentro de una carpeta para layouts específicos:

Configura Tailwind CSS para usar la variable de fuente:#

Edita tu archivo tailwind.config.js para extender la configuración de fuentes:

Usa la fuente en tus componentes:#

Ventajas de usar @next/font:

  • Optimización automática: Next.js optimiza la carga de la fuente, incluyendo la inserción de los estilos críticos en el <head> para evitar el Flash of Unstyled Text (FOUT).
  • Rendimiento mejorado: Carga asíncrona de las fuentes no críticas.
  • Soporte para Google Fonts y fuentes locales: Facilita la carga de ambas.
  • Variables CSS: Permite una integración sencilla con Tailwind CSS.

Alternativa: Usando Archivos de Fuente Locales (WOFF2)#

Esta alternativa implica descargar los archivos de fuente Poppins en formato WOFF2 y servirlos localmente.El formato WOFF2 ofrece una excelente compresión y compatibilidad con navegadores modernos, lo que puede resultar en tiempos de carga ligeramente más rápidos en comparación con otros formatos si se configura correctamente.

Descarga los archivos WOFF2 de Poppins:#

Puedes obtener los archivos WOFF2 de Poppins desde diversas fuentes, como Google Fonts (descargando el paquete y extrayendo los archivos WOFF2) o a través de otras plataformas de fuentes. Asegúrate de descargar los pesos que necesitas (400, 500, 600, 700 en nuestro ejemplo).

Crea un directorio para tus fuentes locales:#

En la raíz de tu proyecto Next.js, crea un directorio llamado public/fonts (o el nombre que prefieras).Coloca los archivos .woff2 de Poppins dentro de este directorio.Por ejemplo:

Define una @font-face en tu archivo de estilos global (globals.css):

Abre tu archivo styles/globals.css (o el archivo donde tengas tus estilos globales) y define las reglas @font-face para cada peso de Poppins:

Asegúrate de que la ruta en url() sea correcta según la ubicación de tus archivos WOFF2 en el directorio public.font-display: swap; es crucial para indicar al navegador que muestre el texto con una fuente de respaldo mientras se carga la fuente Poppins, evitando el FOUT.

Configura Tailwind CSS para usar la fuente local:#

Edita tu archivo tailwind.config.js para extender la configuración de fuentes:

Usa la fuente en tus componentes:#

Ventajas de usar archivos de fuente locales (WOFF2):#

  • Control total sobre los archivos de fuente: No dependes de un servicio externo como Google Fonts.
  • Potencialmente menor tiempo de carga: Al estar alojados en el mismo servidor que tu aplicación, se eliminan las búsquedas de DNS y las conexiones a servidores externos.El formato WOFF2 es altamente eficiente.
  • Mayor privacidad: No se envían solicitudes a servidores de terceros para obtener las fuentes.

Consideraciones al usar archivos de fuente locales:#

  • Gestión de archivos: Debes asegurarte de que los archivos de fuente estén correctamente incluidos en tu proyecto y desplegados.
  • Actualizaciones: Si la fuente Poppins se actualiza, deberás descargar manualmente las nuevas versiones y reemplazarlas en tu proyecto.
  • Soporte de navegadores: Aunque WOFF2 tiene un excelente soporte moderno, asegúrate de considerar si necesitas formatos de respaldo para navegadores más antiguos (aunque esto es menos común en aplicaciones modernas).

Sobre la alternativa con WOFF2:#

Utilizar archivos de fuente locales en formato WOFF2 es una alternativa viable y a menudo beneficiosa en términos de rendimiento y control.Sin embargo, la gestión de los archivos y las posibles actualizaciones recaen en el desarrollador.

Si buscas la máxima optimización sin la gestión manual de archivos, @next/font sigue siendo la opción más integrada y recomendada dentro del ecosistema de Next.js.Ambas opciones, cuando se configuran correctamente, son superiores a la importación directa desde Google Fonts en términos de rendimiento inicial.