Las fuentes web son una excelente manera de agregar fuentes personalizadas a su sitio web. Es posible que estas fuentes no estén disponibles en el sistema de un usuario, por lo que debe incluirlas en su proyecto al alojarlas o hacer referencia a ellas a través de un CDN.
Aprenda a incluir fuentes web en un sitio web de Next.js usando estos dos métodos.
Uso de fuentes autohospedadas en Next.js
Para agregar fuentes autohospedadas en Next.js, debe usa la regla CSS @font-face. Esta regla le permite agregar fuentes personalizadas a una página web.
Antes de usar font-face, debe descargar las fuentes que desea usar. Hay muchos sitios en Internet que ofrecen fuentes gratuitas, incluidos los sitios web de fuentes de Google, fontspace y dafont.
Una vez que descargue las fuentes web, conviértalas a diferentes formatos de fuente para admitir múltiples navegadores. Puedes usar herramientas gratuitas de conversión de fuentes en línea para hacerlo Los navegadores web modernos admiten los formatos .woff y .woff2. Si necesita admitir navegadores heredados, también debe proporcionar formatos .eot y .ttf.
Crear una nueva carpeta llamada fuentes en el directorio de su sitio y guarde sus archivos de fuente convertidos allí.
El siguiente paso es incluir las caras de las fuentes en el estilos/global.css para que estén disponibles en todo el sitio web. Este ejemplo muestra las caras de la fuente de la sirena en negrita:
@Perfil delantero {
Familia tipográfica: 'Sirena';
origen: url('Mermaid-Bold.eot');
origen: url('Mermaid-Bold.eot?#iefix') formato('incrustado-tipo abierto'),
URL ('sirena-negrita.woff2') formato('woff2'),
URL ('sirena-negrita.woff') formato('guau'),
URL ('sirena-negrita.ttf') formato('tipo verdadero');
fuente-peso: negrita;
estilo de fuente: normal;
visualización de fuente: intercambio;
}
Una vez que haya incluido los archivos de fuentes, puede usar esas fuentes en un archivo CSS de nivel de componente:
h1 {
familia tipográfica: Mermaid;
}Incluir fuentes web en Next.js a través de un CDN
Algunos sitios web sirven fuentes web a través de un CDN que puede importar a su aplicación. Este enfoque es fácil de configurar porque no necesita descargar fuentes ni crear caras de fuentes. Además, si usa fuentes de Google o TypeKit, Next.js maneja automáticamente la optimización.
Puede agregar fuentes desde un CDN usando la etiqueta de enlace o la regla @import dentro de un archivo CSS.
La etiqueta de enlace siempre va dentro de la etiqueta principal de un documento HTML. Para agregar una etiqueta de encabezado en Next.js, debe crear un documento personalizado. Este documento modifica las etiquetas de encabezado y cuerpo utilizadas para representar cada página.
Comience a usar esta función de documento personalizado creando el archivo /pages/_document.js.
Luego, incluya el enlace a la fuente en el encabezado del archivo _document.js.
importar Documento, { Html, Encabezado, Principal, NextScript } de "próximo/documento";
claseMi documentoextiendeDocumento{
estáticoasíncrono getInitialProps (ctx) {
constante propsinicial = esperar Documento.getInitialProps (ctx);
devolver { ...AccesoriosIniciales };
}
prestar() {
devolver (
<html>
<Cabeza>
<enlace
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&mostrar = intercambiar"
rel="hoja de estilo"
/>
</Head>
<cuerpo>
<Principal />
<Siguiente Script />
</body>
</Html>
);
}
}
exportarpor defecto Mi documento;Cómo usar la regla @import para incluir fuentes en un proyecto Next.js
Otra opción es usar la regla @import en el archivo CSS en el que desea usar la fuente.
Por ejemplo, haga que la fuente esté disponible en todo el proyecto importando la fuente web en el estilos/global.css archivo.
@importar URL ('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&mostrar = intercambiar');
Ahora puede hacer referencia a la familia de fuentes en un Selector de CSS como esto:
h1 {
Familia tipográfica:'Pantalla Caslon Libre', serifa;
}La regla @import le permite importar una fuente en un archivo CSS contenido. El uso de la etiqueta de enlace hace que la fuente sea accesible en todo el sitio.
¿Debería alojar fuentes localmente o importarlas a través de un CDN?
Las fuentes alojadas localmente suelen ser más rápidas que las fuentes importadas desde un CDN. Esto se debe a que el navegador no tiene que realizar una solicitud adicional a la fuente CDN una vez que se ha cargado la página web.
Si desea utilizar fuentes importadas, precárguelas para mejorar el rendimiento del sitio. Si las fuentes están disponibles en fuentes de Google o Typekit, puede importarlas y aprovechar las funciones de optimización de Next.js.
