Dise帽o de paginas web

agosto 5, 2020

C贸mo guardar fuentes de Google en el servidor local

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.

fuente Montserrat
Fuente Montserrat 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).

Monserrat 2
Fuente Monserrat HTML

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:

Monserrat fuente
URL

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:

Google Web Fonts Helper
VIsualizar Google Web Fonts Helper

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:

Generador
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