Las fuentes de Google (o Google Fonts) son un inmenso catálogo de fuentes tipográficas que muchos desarrolladores web utilizamos para nuestros proyectos. Son rápidas, alojadas en los servidores de Google, y de calidad.

Pero, como todo, depender de un servidor externo también tiene sus inconvenientes. Cargar recursos de diferentes hosts, aparte del nuestro propio, hace que la carga sea más lenta y aumenta la probabilidad de error (un servidor que se cae, por ejemplo). Y estas cosas ocurren, por muy rápidos y fiables que sean los servidores de Google (que lo son).

De cualquier forma, siempre tenemos la posibilidad de almacenar, en nuestro servidor, las fuentes tipográficas que utilicemos. Podemos almacenar los ficheros que definen las fuentes, en una carpeta dentro de nuestro directorio web, y luego declararlo a través de CSS.

Por ejemplo, podemos guardar los ficheros de la fuente que queramos utilizar en el directorio /fuentes , y en el código CSS incluir algo como ésto:

@font-face {
font-family: 'Arsenal';
font-style: normal;
font-weight: 400;
src: url('/fuentes/arsenal-v1-latin-regular.eot');
src: local('Arsenal Regular'), local('Arsenal-Regular'),
url('/fuentes/arsenal-v1-latin-regular.eot?#iefix') format('embedded-opentype'),
url('/fuentes/arsenal-v1-latin-regular.woff2') format('woff2'),
url('/fuentes/arsenal-v1-latin-regular.woff') format('woff'),
url('/fuentes/arsenal-v1-latin-regular.ttf') format('truetype'),
url('/fuentes/arsenal-v1-latin-regular.svg#Arsenal') format('svg');
}

De esta forma ya tendremos lista para usar la fuente Arsenal en nuestras páginas web.

Existe una aplicación web, llamada google-webfonts-helper, que permite hacer todo ésto de forma automática y simplifica el proceso. Sólo tenemos que elegir la fuente que queramos utilizar (que pertenezca al catálogo de Google Fonts), elegir el conjunto de caracteres (o charset), los estilos que vamos a necesitar, copiar el CSS que nos muestra la aplicación (para hacer un simple copiar-pegar) y, por supuesto, no olvidarnos de descargar los ficheros que definen la fuente en cuestión y que deberemos alojar en nuestro propio servidor.

Ejemplo con google-webfonts-helper

Ejemplo con google-webfonts-helper

Como habrás visto, con google-webfonts-helper este proceso de alojar en nuestro servidor cualquier fuente de Google Fonts es muy sencillo, sólo tenemos que elegir una fuente y seguir los pasos que nos indica la aplicación.

Además, el código CSS generado permite la compatibilidad con los navegadores web más populares.