Cómo usar @next/font para optimizar fuentes en Next.js

¿Están las fuentes ralentizando el rendimiento de su sitio? Optimice el tiempo de carga de fuentes de su aplicación usando este paquete.

Es posible que desee utilizar fuentes personalizadas para que su aplicación Next.js sea más atractiva visualmente. El uso de fuentes personalizadas puede mejorar significativamente la apariencia de su sitio web, pero también puede ralentizar el rendimiento de su sitio si no se optimiza correctamente. El@siguiente/fuentepackage es una solución a este problema.

El paquete @next/font proporciona una manera simple y eficiente de optimizar la carga de fuentes en Next.js, mejorando el tiempo de carga de la página y el rendimiento general. Este artículo proporciona información sobre cómo usar @next/font en su proyecto Next.js.

Puedes instalar el@siguiente/fuentepaquete ejecutando el siguiente comando en su terminal:

Si está utilizando yarn, puede instalar el paquete ejecutando este comando:

El@siguiente/fuente El paquete optimiza el uso de las fuentes de Google. El@siguiente/fuentealoja automáticamente las fuentes de Google en el servidor Next.js para que no se envíe ninguna solicitud a Google para obtener las fuentes.

Para usar una fuente de Google en su aplicación, importará la fuente como una función de@siguiente/fuente/googleen el_app.jsarchivo en elpaginasdirectorio:

En el bloque de código anterior, creó una fuente variable usando elRobot función de fuente Elsubconjunto la propiedad subconjuntos de la fuente a los caracteres latinos solos; si usa otro idioma, puede subconfigurar la fuente a ese idioma.

También puede especificar el peso de la fuente junto con el estilo de fuente al definir la fuente:

Puede especificar varios pesos de fuente y estilos de fuente mediante matrices.

Por ejemplo:

A continuación, envolverá sus componentes en unprincipaletiquetar y pasar la fuente como una clase alprincipaletiqueta:

Al representar su aplicación con el bloque de código anterior, se aplicará la fuente a toda su aplicación. Alternativamente, puede aplicar la fuente a una sola página. Para hacer esto, agrega la fuente a una página específica.

Al igual que:

El@siguiente/fuente El paquete también optimiza el uso de fuentes locales. La técnica de optimización de fuentes locales a través de la@siguiente/fuenteEl paquete es bastante similar a la optimización de las fuentes de Google, con sutiles diferencias.

Para optimizar las fuentes locales, utilice elfuente localfunción proporcionada por el@siguiente/fuente paquete. importas elfuente localfunción de@siguiente/fuente/localy luego defina su fuente variable antes de usar la fuente en su aplicación Next.js.

Al igual que:

Tú defines la fuente variablemiFuenteutilizando elfuente local función. Elfuente local La función toma un objeto como su argumento. El objeto tiene una sola propiedad,origen, que se establece en la ruta del archivo de fuente en elWOFF2formato"./mi-fuente.woff2".

Puede utilizar varios archivos de fuentes para una sola familia de fuentes. Para ello, configura elorigenpropiedad a una matriz que contiene objetos de las diferentes fuentes y sus propiedades.

Por ejemplo:

Usar el@siguiente/fuente paquete con Tailwind CSS, necesita usar variables CSS. Para hacer esto, definirá su fuente usando Google o fuentes locales y luego cargará su fuente con la opción variable para especificar el nombre de la variable CSS.

Por ejemplo:

En el bloque de código anterior, creó la fuente,enterrar,y establezca la variable en--fuente-inter . Elnombre de la clasedel elemento principal se establece en la variable de fuente yhacer sin . Elintervariablela clase aplicará elenterrarfuente a la página, y elhacer sinclass aplicará la fuente sans-serif predeterminada.

A continuación, agrega la variable CSS al archivo de configuración de viento de colatailwind.config.cjs:

Ahora puede aplicar la fuente en su aplicación usando elhacer sinclase.

El paquete @next/font es una forma simple y efectiva de optimizar la carga de fuentes en Next.js. Este paquete garantiza que sus fuentes personalizadas se carguen de manera eficiente, lo que mejora el rendimiento de su sitio web y la experiencia del usuario. Este artículo proporciona información sobre cómo configurar el paquete @next/font y utilizarlo en su aplicación Next.js. Puede mejorar aún más el rendimiento de su sitio optimizando las imágenes.

Noble Okafor es un ingeniero de software experto con más de 3 años de experiencia en el campo de la programación. Le apasiona crear soluciones de software web y móviles nativas y multiplataforma con JavaScript optimizado. Se esfuerza por documentar sus conocimientos y lecciones a través de sus artículos técnicos con más de un año de experiencia en la escritura. El enfoque principal y el objetivo de estos artículos es simplificar las complejidades en torno a los temas de ingeniería de software.