¿Las fuentes están 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/fuente package 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.
Instalación del paquete
Puedes instalar el @siguiente/fuente paquete ejecutando el siguiente comando en su terminal:
npm instalar @siguiente/fuente
Si está utilizando yarn, puede instalar el paquete ejecutando este comando:
añadir hilo @next/fuente
Uso de @next/font para optimizar las fuentes de Google
El @siguiente/fuente El paquete optimiza el uso de las fuentes de Google. El @siguiente/fuente aloja 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/google en el _app.js archivo en el paginas directorio:
importar {Robot} de'@siguiente/fuente/google'constante roboto = roboto({ subconjuntos: ['latín'] })
exportarpor defectofunciónMi aplicación({ Componente, accesorios de página }) {
devolver (
)
}
En el bloque de código anterior, creó una fuente variable usando el roboto función de fuente El subconjunto 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:
constante roboto = roboto(
{
subconjuntos: ['latín'],
peso: '400',
estilo: 'itálico'
}
)
Puede especificar varios pesos de fuente y estilos de fuente mediante matrices.
Por ejemplo:
constante roboto = roboto(
{
subconjuntos: ['latín'],
peso: ['400', '500', '700'],
estilo: ['itálico', 'normal']
}
)
A continuación, envolverá sus componentes en un principal etiquetar y pasar la fuente como una clase al principal etiqueta:
importar {Robot} de'@siguiente/fuente/google'constante roboto = roboto(
{
subconjuntos: ['latín'],
peso: ['400', '500', '600'],
estilo: ['itálico', 'normal']
}
)
exportarpor defectofunciónMi aplicación({ Componente, accesorios de página }) {
devolver (
</main>
)
}
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:
importar {Robot} de'@siguiente/fuente/google'constante roboto = roboto(
{
subconjuntos: ['latín'],
peso: ['400', '500', '600'],
estilo: ['itálico', 'normal']
}
)
exportarpor defectofunciónHogar() {
devolver (¡Hola!/p>
</div>
)
}
Uso de @next/font para optimizar las fuentes locales
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/fuente El paquete es bastante similar a la optimización de las fuentes de Google, con sutiles diferencias.
Para optimizar las fuentes locales, utilice el fuente local función proporcionada por el @siguiente/fuente paquete. importas el fuente local función de @siguiente/fuente/local y luego define tu fuente variable antes usando la fuente en su aplicación Next.js.
Al igual que:
importar fuente local de'@siguiente/fuente/local'constante miFuente = fuentelocal({ origen: './mi-fuente.woff2' })
exportarpor defectofunciónMi aplicación({ Componente, accesorios de página }) {
devolver (
</main>
)
}
Tú defines la fuente variable miFuente utilizando el fuente local función. El fuente 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 el WOFF2 formato "./mi-fuente.woff2".
Puede utilizar varios archivos de fuentes para una sola familia de fuentes. Para ello, configura el origen propiedad a una matriz que contiene objetos de las diferentes fuentes y sus propiedades.
Por ejemplo:
constante miFuente = fuentelocal(
{
origen: [
{
camino: './Roboto-Regular.woff2',
peso: '400',
estilo: 'normal',
},
{
camino: './Roboto-cursiva.woff2',
peso: '400',
estilo: 'itálico',
},
{
camino: './Roboto-Bold.woff2',
peso: '700',
estilo: 'normal',
},
{
camino: './Roboto-BoldItalic.woff2',
peso: '700',
estilo: 'itálico',
},
]
}
)
Uso de @next/font con Tailwind CSS
Usar el @siguiente/fuente paquete con Tailwind CSS, necesitas 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:
importar { Inter } de'@siguiente/fuente/google'constante inter = inter({
subconjuntos: ['latín'],
variable: '--fuente-inter',
})
exportarpor defectofunciónMi aplicación({ Componente, accesorios de página }) {
devolver (`${inter.variable} fuente-sans`}>
</main>
)
}
En el bloque de código anterior, creó la fuente, enterrar, y establezca la variable en --fuente-inter. El nombre de la clase del elemento principal se establece en la variable de fuente y fuente-sans. El intervariable la clase aplicará el enterrar fuente a la página, y el fuente-sans class aplicará la fuente sans-serif predeterminada.
A continuación, agrega la variable CSS al archivo de configuración de viento de cola tailwind.config.cjs:
/** @tipo {importación('tailwindcss').Config}*/
módulo.exportaciones = {
contenido: ["./index.html",
"./src/**/*.{js, ts, jsx, tsx}",],
tema: {
extender: {
Familia tipográfica: {
sans: ['var(--fuente-inter)'],
},
},
},
complementos: [],
}
Ahora puede aplicar la fuente en su aplicación usando el fuente-sans clase.
Optimización de fuentes con @next/font
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.