Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Typography

Cómo auto-hospedar las fuentes de Google en tu propio servidor

by
Read Time:11 minsLanguages:

Spanish (Español) translation by Valeria Angulo (you can also view the original English article)

Como diseñadores web que vivimos en la era de la Internet de alta velocidad, hemos adquirido el hábito de añadir dependencias externas como servidores de fuentes de terceros, más frecuentemente de redes de entrega de contenido (CDNs). Sin embargo, esta no es siempre la mejor decisión. A veces, sigue siendo mejor atenerse a tu propia infraestructura y hospedar tus activos en tu servidor local.

En este artículo, veremos cómo autohospedar un recurso estático de uso frecuente: las Fuentes de Google. Esto se aplica tanto a los sitios web alojados localmente en tu sistema, como a tu propio servidor web. Aunque el auto-hospedaje de las fuentes de Google puede parecer fácil y autoexplicativo al principio, hay muchas cosas a las que prestar atención si quieres tener en cuenta el rendimiento.

google fontsgoogle fontsgoogle fonts

Antes de entrar en los detalles prácticos, veamos cuándo vale la pena hospedar las fuentes de Google en tu propio servidor.

Pros y contras del Auto-Hospedaje de las fuentes de Google

Estos pros y contras no solo se aplican a las fuentes de Google, sino a cualquier fuente hospedada en la web. La única diferencia que probablemente vale la pena señalar es que las fuentes de Google se almacenan en el CDN de Google, por lo que se puede esperar una baja latencia, un mantenimiento adecuado y un buen rendimiento (a diferencia de algunos proveedores más pequeños). Además, no tienes que preocuparte de que el servicio se interrumpa en algún momento en el futuro.

Ventajas (Pros) de las fuentes web auto-hospedables:

  • Mejor para la privacidad: las CDN de terceros utilizan con frecuencia cookies y otros algoritmos de rastreo que tú no necesariamente conoces; esto es especialmente problemático en los países en los que se requiere que obtengas el consentimiento explícito de tus usuarios para ser rastreados en tu sitio (por ejemplo, aquí tienes un buen estudio de caso de la conformidad con la GDPR de las fuentes de Google).
  • Mejor para la seguridad: no es probable que las fuentes de Google sean pirateadas, pero en tu propio servidor, todavía tienes el control total de tu seguridad.
  • Más rápido, mejor rendimiento: Las fuentes de Google cargan mucho más CSS que no necesitarás; además, si te autoalojas, también puedes agrupar y minificar las reglas/archivos CSS relacionados con la fuente (lo que también da lugar a menos solicitudes HTTP).
  • Disponibilidad sin conexión: esto es más importante en el caso de una aplicación para móvil/escritorio a la que los usuarios acceden con frecuencia sin conexión, sin embargo, es posible que también quieran acceder a tu sitio web utilizando un navegador sin conexión o simplemente descargarlo para su uso posterior.

Contras de las fuentes web auto-hospedables:

  • Tiempo y conocimientos adicionales: se necesita más trabajo y experiencia para añadir los archivos de fuentes y las reglas de @font-face.
  • Mayor latencia de la entrega de fuentes: Google CDN es una red distribuida globalmente que entrega recursos rápidamente, con distribución global y baja latencia.
  • Menor probabilidad de que las fuentes se almacenen en caché: si se extraen las fuentes y el CSS relacionado de la red de Google CDN, es más probable que el navegador del usuario ya haya almacenado estos recursos en caché.

¿Qué sucede cuando añades fuentes de Google desde la CDN?

Antes de ver cómo auto-hospedar fuentes de Google en tu servidor, veamos rápidamente qué sucede cuando las extraes del CDN de Google. Digamos que quieres añadir la fuente Montserrat a tu sitio. Esta fuente tiene 18 variantes estáticas, pero solo quieres añadir cuatro: regular, cursiva regular, negrita y negrita cursiva.

Como las fuentes de Google tienen una interfaz fácil de usar, solo tienes que seleccionar los estilos que quieres añadir, y automáticamente genera la etiqueta <link> que necesitas insertar en tu archivo HTML.

Add Google Fonts from CDNAdd Google Fonts from CDNAdd Google Fonts from CDN

Haz clic en la pestaña Embed a la derecha de la pantalla, copia la etiqueta <link> y añádela a tu página HTML (no uses la regla @import; es mala para el rendimiento, ya que aumenta el tiempo de carga de la página).

Pull Google Font online using link tagPull Google Font online using link tagPull Google Font online using link tag

Así que, para añadir las variantes regular, cursiva regular, negrita y cursiva negrita de la fuente Montserrat a tu sitio, necesitas insertar la siguiente línea en la sección <head> de tu archivo HTML:

Luego, puedes añadir la siguiente regla CSS a cualquier selector en tu archivo CSS:

Bien, eso es todo. Pero, ¿qué sucede realmente en el fondo? Podemos obtener una respuesta a esa pregunta introduciendo la URL de arriba en la barra de direcciones del navegador.

google font stylesheet opened in chromegoogle font stylesheet opened in chromegoogle font stylesheet opened in chrome

Puedes ver que el enlace incluye un archivo CSS con múltiples reglas @font-face a todos los conjuntos de caracteres que soporta la fuente Montserrat; respectivamente cirílico, cirílico extendido, vietnamita, latín y latín extendido. Esto suma un total de 20 reglas @font-face para las cuatro variantes de fuentes (normal, cursiva normal, negrita y negrita cursiva).

Sin embargo, si nos auto-hospedamos con estas mismas fuentes, el conjunto de caracteres latinos sería suficiente en un sitio web en inglés. Esto se traduciría en cuatro reglas de @font-face en total en lugar de 20. Si quisiéramos usar las 18 variantes de fuentes de Montserrat, llegaríamos a 90 reglas de @font-face en lugar de 18, una diferencia aún mayor.

Ahora, veamos cómo auto-hospedar las fuentes de Google en tu propio servidor.

Cómo alojar fuentes de Google en tu propio servidor

Para hospedar las fuentes de Google localmente, debes subir todos los archivos de fuentes que quieras usar a tu servidor y también añadir las correspondientes reglas de @font-face a tu CSS. Puedes hacer todo eso manualmente, pero hay una práctica herramienta de código abierto llamada Google Web Fonts Helper que automatiza el proceso para ti.

En Google Web Fonts Helper, puedes encontrar todas las fuentes de Google en la barra lateral izquierda. Para descargar los archivos de fuentes y generar las reglas CSS relacionadas, debes rellenar un sencillo formulario que te permite seleccionar el juego de caracteres, los estilos y el nivel de compatibilidad del navegador:

Google Webfonts HelperGoogle Webfonts HelperGoogle Webfonts Helper

He seleccionado el conjunto de caracteres latinos, los mismos estilos (regular, cursiva regular, negrita, negrita cursiva), y soporte para los navegadores modernos, lo que significa que añadiremos los formatos WOFF y WOFF2 que son técnicas de compresión específicas para la web para fuentes TTF (y OTF).

Si también quieres apoyar a los navegadores más antiguos, elige el mejor apoyo en lugar de los navegadores modernos, que añadirá las fuentes en cinco formatos: WOFF, WOFF2, TTF, EOT, SVG.

Nota: el navegador solo descargará el formato que necesite. Por ejemplo, si soporta WOFF2, no descargará los archivos WOFF, TTF, EOT y SVG, aunque estén presentes en tu servidor.

Debajo del formulario, encontrarás las reglas de @font-face que debes agregar a tu archivo CSS. Por ejemplo, aquí están las reglas @font-face que el generador ha devuelto para nuestras especificaciones:

Como puedes ver, cada variante de fuente tiene su propia regla de @font-face.

Dentro de cada regla @font-face, el descriptor src comprueba primero si el usuario tiene la fuente instalada en su sistema operativo, utilizando la función local(). Si el usuario tiene el archivo de la fuente localmente, el navegador no tiene que descargarlo. Luego, la función url() agrega el archivo de fuente en ambos formatos WOFF2 y WOFF (pero el navegador solo descargará el primer tipo de archivo que soporte).

Copia estas reglas @font-face de Google Web Fonts Helper e insértalas al principio de tu archivo CSS. También tienes que descargar y descomprimir los archivos de fuentes, lo que puedes hacer haciendo clic en el botón Descargar archivos en la parte inferior del generador:

Download WOFF and WOFF2 font files from Google Web Fonts HelperDownload WOFF and WOFF2 font files from Google Web Fonts HelperDownload WOFF and WOFF2 font files from Google Web Fonts Helper

Nuestro archivo ZIP de ejemplo contendrá ocho archivos de fuentes, las versiones WOFF y WOFF2 de las cuatro variantes de fuentes. Después de descomprimirlo, sube todos los archivos de fuentes a tu servidor (preferiblemente en una carpeta llamada fonts/). Tampoco te olvides de prestar atención a la ruta URL, ya que las funciones url() tienen que utilizar la ruta exacta del archivo donde se encuentran tus fuentes en tu servidor.

Como alternativa, también puedes descargar los archivos de fuentes directamente de Google Fonts, sin embargo, allí solo están disponibles en formato TTF.

Aunque también puedes añadir los archivos de fuentes como TTF (WOFF y WOFF2 son archivos TTF comprimidos después de todo), tus archivos de fuentes serán mucho más pesados (por ejemplo, Montserrat Regular es 110 KB como TTF, 23 KB como WOFF y 19 KB como WOFF2). También puedes utilizar una herramienta de compresión como la herramienta woff2 de Google, pero en conjunto es más fácil generar los archivos WOFF y WOFF2 utilizando Google Web Fonts Helper.

Añade las propiedades Font-Display y Unicode-Range

Si miras de nuevo el archivo CSS extraído de Google CDN, verás que cada declaración de @font-face incluye dos reglas extra que Google Web Fonts Helper no añade: font-display y unicode-range. Ambas son descriptores de la regla @font-face.

El descriptor font-display define lo que sucede si el archivo de fuente personalizada no se carga inmediatamente. Usarlo con el valor de intercambio swap es una técnica de optimización del rendimiento. Significa que la fuente personalizada es sustituida inmediatamente por una fuente del sistema y cuando está lista para ser usada, reemplaza la fuente del sistema. Usando esta técnica, se puede disminuir el tiempo de carga de la página y evitar el texto invisible durante la carga de la fuente.

El descriptor unicod-range especifica el conjunto de caracteres que cubre el archivo de fuente correspondiente. De acuerdo con la Red de Desarrollo de Mozilla:

"Si la página no usa ningún carácter de este rango, la fuente no se descarga; si usa al menos uno, se descarga toda la fuente".

Así que este descriptor es útil cuando quieres cargar más de un conjunto de caracteres, digamos latín y cirílico en un sitio web bilingüe. Si añades un descriptor unicode-range a cada regla de @font-face, entonces los archivos de fuentes cirílicas no se descargarán en las páginas que usan caracteres latinos, y viceversa, los archivos de fuentes latinas no se descargarán en las páginas que usan caracteres cirílicos.

Como en nuestro ejemplo, solo usamos el conjunto de caracteres latinos, no es necesario añadir la propiedad unicode-range. Sin embargo, como el font-display: swap puede mejorar los tiempos de carga de la página, lo añadimos a cada regla @font-face:

¡Así es como puedes hospedar las fuentes de Google tú mismo!

El auto-hospedaje de las fuentes de Google tiene tanto ventajas (pros) como desventajas (contras): tienes que evaluar tus necesidades y objetivos para decidir si las hospedas en tu propio servidor o las sacas del CDN de Google.

También puedes elegir una solución mixta para obtener lo mejor de ambos mundos. Por ejemplo, este tutorial de John Franey muestra cómo añadir reglas de @font-face localmente pero sacando los archivos de fuentes de la red.

Hoy en día, puedes hospedar tu sitio web en la nube de Google con proveedores de alojamiento como Siteground o Kinsta también. De esta manera, puedes aprovechar una red distribuida globalmente mientras sigues alojando tus fuentes localmente.

Si no puedes decidirte, también puedes probar qué solución funciona mejor para tu caso de uso específico. Establece un sitio de prueba con fuentes Google alojadas localmente y otro que cargue las fuentes desde Google CDN, y compara los tiempos de carga de las páginas con una herramienta de análisis de rendimiento como Lighthouse o GTMetrix.

Y, si quieres añadir las fuentes de Google a tu sitio de WordPress, echa también un vistazo al tutorial de Jessica Thornsby aquí en Tuts+.

Más fuentes de inspiración en la web

Echa un vistazo a estos tutoriales y artículos de diseño si todavía estás buscando más inspiración para las fuentes web:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.