A continuación explicaremos cómo guardar fuentes de Google en el servidor local. Esto se aplica en sitios web alojados localmente como servidores web propios.
Aunque las fuentes de Google autohospedaje parecen fáciles y entendibles al principio, hay que estar atentos al detalle para mejorar el rendimiento.
Los diseñadores web han adquirido el hábito de agregar dependencias externas como fuentes de servidores de terceros, con mayor frecuencia de redes de entrega de contenido (CDN). Sin embargo, no es la mejor opción. A veces, aún es mejor contar con la propia infraestructura y alojar los activos en el servidor local.
En este texto, veremos cómo autohospedar un activo estático de uso frecuente: Google Fonts.
Ventajas y desventajas de las fuentes autohospedables de Google
Los pros y contras no solo se aplican a las fuentes de Google, sino a fuentes alojada en la web. La diferencia es que las fuentes de Google se almacenan en el CDN de Google, por lo que se puede esperar baja latencia, mantenimiento adecuado y buen rendimiento (a diferencia de otros proveedores). Además, no hay que preocuparse por que el servicio se suspenda.
Ventajas de las fuentes web de alojamiento propio:
- Privacidad: los CDN de terceros suelen utilizar cookies y otros algoritmos de seguimiento que no necesariamente se conocen; Esto es un problema en países donde se requiere obtener el consentimiento de los usuarios para ser rastreado en su sitio.
- Seguridad: es difícil que Google Fonts sea pirateado, pero en el propio servidor hay control total sobre la seguridad.
- Mejor rendimiento: las fuentes de Google cargan mucho CSS adicional que no es necesario; Además, si se autohospeda, también se pueden agrupar y minimizar las reglas / archivos CSS relacionados con la fuente (lo que también reduce solicitudes HTTP).
- Disponibilidad sin conexión: esto es relevante en el caso de una aplicación a la que los usuarios acceden con frecuencia sin conexión, aunque también es posible que deseen acceder al sitio web usando un navegador sin conexión o descargarlo para usarlo después.
Desventajas de las fuentes web de alojamiento propio:
- Tiempo y conocimiento: se necesitan más trabajo y experiencia para agregar los archivos de fuente y las reglas @font-face.
- Latencia en la entrega de fuentes: Google CDN es una red distribuida que entrega recursos rápidamente y baja latencia.
- Poca probabilidad que las fuentes se almacenen en caché: si se extraen fuentes y el CSS relacionado de la CDN es de Google, es más probable que el navegador del usuario haya almacenado en caché estos recursos.
Agregar fuentes de Google desde CDN
Es importante ver qué sucede cuando las extrae del CDN de Google. Supongamos que desea agregar la fuente Montserrat a su sitio. Esta fuente tiene 18 variantes estáticas, pero solo desea agregar cuatro: regular, regular cursiva, negrita y negrita cursiva.
Como Google Fonts tiene una interfaz fácil, solo tiene que seleccionar los estilos que desea agregar, y automáticamente genera la etiqueta <link> que necesita insertar en el archivo HTML.
Hay que hacer clic en la pestaña Incrustar a la derecha de la pantalla, copie la etiqueta <link> y agregarla a la página HTML (no use la regla @import; perjudica el rendimiento ya que aumenta el tiempo de carga de la página).
Para agregar las variantes de cursiva regular, cursiva, negrita y negrita cursiva de la fuente Montserrat al sitio, hay que insertar la siguiente línea en la sección <head> del archivo HTML:
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
Después se puede agregar la regla CSS a cualquier selector en el archivo CSS:
1 div {
2 font-family: ‘Montserrat’, sans-serif;
3 }
¿Qué sucede realmente en el fondo? Podemos verlo de la siguiente manera:
Se puede ver que el enlace incluye un archivo CSS con múltiples reglas @font-face para los juegos de caracteres que admite la fuente Montserrat: cirílico, cirílico extendido, vietnamita, latín y latín extendido. Esto es un total de 20 reglas @font-face para las cuatro variantes de fuente (regular, cursiva regular, negrita y negrita cursiva).
Sin embargo, si alojamos estas mismas fuentes, el conjunto de caracteres latinos sería suficiente en el sitio web en inglés. Eso significaría cuatro reglas @font-face en total en lugar de 20. Si quisiéramos usar las 18 variantes de fuente de Montserrat, obtendríamos 90 reglas @font-face en lugar de 18, una gran diferencia.
Cómo guardar fuentes de Google en el servidor local
Para alojar Google Fonts localmente, se deben cargar los archivos de fuentes que se deseen usar en el servidor y agregar las reglas @font-face correspondientes al CSS. Se puede hacer todo esto manualmente, pero hay una práctica herramienta de código abierto llamada Google Web Fonts Helper que automatiza el proceso.
En Google Web Fonts Helper, se pueden encontrar las fuentes de Google en la barra lateral izquierda. Para descargar los archivos de fuentes y generar las reglas CSS relacionadas, se debe completar un formulario que selecciona el conjunto de caracteres, los estilos y el nivel de soporte del navegador:
Se ha seleccionado el conjunto de caracteres latinos, los mismos estilos (regular, cursiva regular, negrita, negrita cursiva) y soporte para navegadores modernos, lo que significa que agregaremos los formatos WOFF y WOFF2 que son técnicas específicas de compresión segura para la web para Fuentes TTF (y OTF).
Si también desea admitir navegadores antiguos, se debe elegir el mejor soporte en lugar de los navegadores modernos, que agregarán las fuentes en cinco formatos: WOFF, WOFF2, TTF, EOT, SVG.
Hay que tomar en cuenta que el navegador solo descargará el formato que necesita. Por ejemplo, si es compatible con WOFF2, no descargará los archivos WOFF, TTF, EOT y SVG, incluso si están presentes en el servidor.
Debajo del formulario, encontrarás las reglas @font-face que se necesita agregar al archivo CSS. Por ejemplo, aquí están las reglas @font-face que el generador ha devuelto para las especificaciones:
/* montserrat-regular – latin */
@font-face {
font-family: ‘Montserrat’;
font-style: normal;
font-weight: 400;
src: local(‘Montserrat Regular’), local(‘Montserrat-Regular’),
url(‘../fonts/montserrat-v14-latin-regular.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘../fonts/montserrat-v14-latin-regular.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-italic – latin */
@font-face {
font-family: ‘Montserrat’;
font-style: italic;
font-weight: 400;
src: local(‘Montserrat Italic’), local(‘Montserrat-Italic’),
url(‘../fonts/montserrat-v14-latin-italic.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘../fonts/montserrat-v14-latin-italic.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 – latin */
@font-face {
font-family: ‘Montserrat’;
font-style: normal;
font-weight: 700;
src: local(‘Montserrat Bold’), local(‘Montserrat-Bold’),
url(‘../fonts/montserrat-v14-latin-700.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘../fonts/montserrat-v14-latin-700.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700italic – latin */
@font-face {
font-family: ‘Montserrat’;
font-style: italic;
font-weight: 700;
src: local(‘Montserrat Bold Italic’), local(‘Montserrat-BoldItalic’),
url(‘../fonts/montserrat-v14-latin-700italic.woff2’) format(‘woff2’), /* Chrome 26+, Opera 23+, Firefox 39+ */
url(‘../fonts/montserrat-v14-latin-700italic.woff’) format(‘woff’); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
Como se puede ver, cada variante de fuente tiene su propia regla @font-face.
Dentro de cada regla @font-face, el src descriptor verifica si el usuario tiene la fuente instalada en el sistema operativo, utilizando la función local (). Si el usuario tiene el archivo de fuente local, no hay que descargar el navegador. Luego, la función url() agrega el archivo de fuente en los formatos WOFF2 y WOFF (pero el navegador descargará el primer tipo de archivo que admita).
Hay que copiar estas reglas @font-face de Google Web Fonts Helper e insertarlas en el comienzo del archivo CSS. También se debe descargar y descomprimir los archivos de fuentes, lo que puede hacer haciendo clic en el botón Descargar archivos en la parte inferior del generador:
El archivo ZIP de ejemplo contendrá ocho archivos de fuente, las versiones WOFF y WOFF2 de las cuatro variantes de fuente. Después de descomprimirlo, hay que cargar los archivos de fuentes en el servidor (preferentemente en una carpeta llamada fonts/). Hay que prestar atención a la ruta de la URL, ya que las funciones url() tienen que usar la ruta exacta del archivo donde se encuentran sus fuentes del servidor.
Otra alternativa es descargar los archivos de fuentes directamente de Google Fonts, sin embargo, solo están disponibles en formato TTF.
Aunque también se puede agregar los archivos de fuente como TTF (WOFF y WOFF2 que son archivos TTF comprimidos), los archivos de fuente serán más pesados (por ejemplo, Montserrat Regular es 110 KB como TTF, 23 KB como WOFF y 19 KB como WOFF2). También se puede usar una herramienta de compresión como la herramienta woff2 de Google, pero es más fácil generar los archivos WOFF y WOFF2 usando Google Web Fonts Helper, así podrás saber cómo guardar fuentes de Google en el servidor local.
Leíste: Cómo guardar fuentes de Google en el servidor local, te recomendamos: Genéricos de TypeScript para escribir menos código
Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode
