Usa las fuentes de Google Web Fonts localmente

Descargando el CSS de las Google Web Fonts para su uso offline

Google Web Fonts es una herramienta bastante útil al momento de diseñar sitios web. No sólo porque te ofrece un sinnúmero de beneficios, gracias a que hospeda las fuentes por ti, las optimiza para mostrarlas y, además, basado en el User-Agent del usuario, entrega la fuente correcta, sin enviar fuentes adicionales innecesarias.

Positivamente, las web fonts o, más correctamente, las font-face han tenido un largo trayecto. Por ejemplo, las WOFF2 ya no son un sueño, y son soportadas por Chrome y Firefox y por ende, tenemos un mismo tipo de fuente para distintos navegadores.

Por otra parte, mucha gente se ha cuestionado la “bondad” de Google de ofrecer fuentes instalables fácilmente en cualquier sitio entregando una URL, pero, ¿qué información reciben ellos? Prácticamente toda la información del visitante, con lo que pueden seguir a quien quieran.

Usando las fuentes de manera local

Usar las fuentes de Google localmente no es una mala idea: previenes a tus usuarios entregar una vez más su información a Google (quiéranlo o no), pero además, puede permitirte, por ejemplo, usar las fuentes de manera offline en tu demo de sitio web o, incluso aun, cuando estás probando dentro de una intranet y no tienes manera de acceder al link del CSS que Google provee.

Conoce webfont-dl

webfont-dl es un programa escrito en Javascript para NodeJS que permite descargar una fuente de Google, además de todos sus archivos de fuente — es decir, WOFF, TTF, EOG y SVG — a un grupo de archivos locales. Por si eso no fuera suficiente, y adelantándose al hecho de que una buena parte de los navegadores puede usar fuentes WOFF2, te las descarga dentro del mismo archivo (es decir, las deja “inline”, evitando hacer una petición HTTP adicional) para comodidad de uso.

Instalación

Para instalar webfont-dl necesitas tener NodeJS — o io.js, si estás más “con la onda” — instalado en tu equipo. Descarga el instalador desde el sitio web de NodeJS y procede a instalarlo y luego ejecuta en una consola o terminal node -v. Eso debería mostrarte la versión de NodeJS / io.js instalada y su versión.

Una vez hecho eso, usando el gestor de paquetes de Node, conocido como Node Package Manager, npm, instala webfont-dl escribiendo:

npm install -g webfont-dl # No olvides usar "sudo" si lo necesitas

Ese comando instalará el programa webfont-dl globalmente en tu sistema. Con eso, ya puedes llamarlo usando tu consola.

Descargando una fuente de Google

Por ejemplo, imagina que tienes este CSS añadido en el head de tu sitio web:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,700,300,400' rel='stylesheet' type='text/css'>

Y quieres bajar la fuente Open Sans indicada en esa dirección, entonces ejecuta este comando:

webfont-dl "http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,700,300,400" -o open-sans.css

Verás que hay dos parámetros: primero, tienes la URL de la fuente que estás usando. En una misma URL puedes tener cuantas fuentes quieras (en Google Web Fonts es posible unir en una misma URL todos los tipos de fuente que necesites, uniéndolas con un |), ya que webfont-dl es lo suficientemente inteligente como para detectarlas todas y descargarlas. El segundo parámetro es -o open-sans.css que es la dirección de salida donde quieres guardar tanto el CSS como las fuentes (los archivos de fuente serán guardados en el mismo lugar donde guardes el CSS. Aun así, siempre puedes editarlo para cambiarlas de lugar.

¡Todo listo! Ya puedes usar las fuentes de manera offline. Ninguna petición irá a Google y, como agregado, si el navegador soporta WOFF2, ninguna petición extra más se realizará a tu servidor, ya que, por defecto, WOFF2 viene “inline” dentro del CSS (OJO: eso hará el CSS considerablemente más “pesado”).

Alternativa: google-webfonts-helper

Durante la reconstrucción de este blog, me encontré también con otro servicio, llamado google-webfonts-helper, que es una herramienta bastante útil para descargar Tipografías desde Google.

El modelo de funcionamiento es super simple: abres el sitio, buscas la fuente y los tamaños que necesites – por ejemplo: Open Sans y 300 y 400 – y luego tienes dos pasos a seguir.

Primero, generas el Código CSS para las fuentes, existen dos opciones: “Best support” y “Modern Browsers”. La primera opción te dará varios archivos de fuente, mientras que la segunda está hecha para navegadores más contemporáneos. Yo me fui por la segunda, “Modern Browsers”.

El segundo paso es hacer scroll hasta el punto “4. Download files”: la idea es descargar los archivos de fuente que se referencian en el paso anterior, y ya está.

Depende de la tecnología de generación de sitios web que estés usando el dónde deberás poner los archivos que acabas de descargar. En el caso de este blog, por ejemplo, los archivos van a una carpeta llamada static/ que contiene las fuentes descargadas. El CSS es preprocesado así que ese pedazo de @font-face se va al CSS para ser compilado y optimizado.

No te olvides del link: Google Webfonts Helper – y el repositorio en Github.