Guía completa de Google Fonts

Guía completa de Google Fonts

En esta guía aprenderás cómo usar las más de 800 fuentes del catálogo de Google Fonts, en tus diseños web y en general en cualquier diseño gráfico, dado que también puedes descargártelas.


1.- Introducción

Conocimientos previos

Para usar Google Fonts en tus diseños web necesitas tener conocimientos de HTML y CSS.

En concreto debes saber cómo incluir hojas de estilo CSS externas a un documento HTML, las propiedades para definir la familia y el estilo de fuente, y cómo importar hojas de estilo y archivos de fuente externos mediante las reglas @import y @font-face.

Si no sabes programación en PHP puedes saltarte el apartado 5.- Uso avanzado de la API. Es totalmente opcional y no lo necesitas para una implementación básica de Google Fonts.

La tipografía en HTML

Desde sus inicios el lenguaje HTML estuvo muy limitado en cuanto al uso de fuentes. La presentación visual del documento no era, sin duda, su punto fuerte, y es que tampoco fue su objetivo inicial, ni es comparable con la tecnología que tenemos hoy en día. Ten en cuenta que la primera especificación de HTML data del año 1991.

Para que una fuente se muestre en el navegador del usuario exactamente tal como es, lógicamente el navegador debe disponer de tal archivo de fuente. A la diversidad de sistemas operativos, de fuentes instaladas y de formatos de archivo, había que sumar las bajas velocidades de conexión, más una pobre especificación y estandarización por parte de los navegadores.

Pero todo esto ha cambiado radicalmente. La evolución de la tipografía en HTML podemos resumirla así:

  • Primero usábamos la desaparecida etiqueta font… ¡anidada en cada etiqueta superior!
  • Llegó CSS y empezamos a definir la tipografía con las propiedades font-family y font-size, entre otras.
  • Un paso decisivo fue la aparición de la regla @font-face, que nos permite incorporar nuestros propios archivos de fuentes.
  • Y por último (o solo por ahora), llegó Google Fonts…

Qué es Google Fonts

Es un catálogo con más de 800 fuentes open source, de gran calidad y descargables, junto con una sencilla API que te permite usar cualquier fuente o grupo de fuentes en tus diseños web sin necesidad de tener los archivos de fuente en tu servidor:

  • Las más de 800 familias de fuentes disponibles, de todas las categorías y en sus diversos estilos, nos permiten afrontar cualquier diseño sin necesidad de acudir a otros repositorios.
  • Que sean open source, de código abierto, significa que tenemos plena libertad para usarlas, descargarlas e incluso modificarlas, con o sin propósitos comerciales.
  • Su API nos permite enlazar o incluir estas fuentes en nuestros estilos CSS, sin necesidad de mantener copia de los archivos de fuente y otras importantes ventajas que veremos.
  • Además todas las fuentes se pueden descargar, lo cual nos permite instalarlas en nuestro equipo y usarlas en nuestro programa de diseño o procesador de textos, como cualquier otra.

2.- El directorio de Google Fonts

El directorio o catálogo de fuentes de Google Fonts se encuentra en fonts.google.com.

Solo está disponible en inglés, y al acceder verás su página principal:

Página de inicio de Google Fonts
Página de inicio del catálogo de Google Fonts. Haz clic en la imagen para acceder.

En el menú superior dispones de los enlaces DIRECTORY (la página de inicio), FEATURED (o fuentes destacadas), y ABOUT, donde tienes acceso a la ayuda y toda la documentación.

En el panel de la derecha puedes buscar determinadas fuentes simplemente por su nombre, o bien filtrarlas por Categories (categorías), Languages (lenguajes o alfabetos) y Styles (estilos o variantes).

Este mismo panel también te permite ordenar los resultados por Trending (últimas tendencias o modas), Popular (las fuentes más populares o empleadas), Date Added (fecha en que fue añadida) y Alphabetical (simplemente mostrarlas por orden alfabético).

Categorías de fuentes

Google Fonts clasifica las fuentes en las siguientes categorías principales, acordes con la clasificación que se ha usado tradicionalmente:

  • Serif: Son las fuentes con serifa o remates, los pequeños adornos o salientes ubicados al final del palo o trazo de la letra. La Times New Roman es el ejemplo clásico de este tipo de fuente.
  • Sans Serif: Son las fuentes sin serifa, sin remates o también llamadas de palo seco. Son las que terminan en un trazo liso, sin salientes. Ejemplos típicos son la Arial o la Helvética.
  • Display: de exhibición o decorativas, aquellas cuyo principal propósito no es la legibilidad, sino la apariencia. Están orientadas al diseño de rótulos, logotipos y tamaños grandes. No son aptas para su lectura continuada.
  • Handwriting: las manuscritas, hechas a mano o también llamadas caligráficas. Son las fuentes que simulan el trazo humano, y en general tampoco son aptas para su uso en el cuerpo de los artículos.
  • Monospace: o monoespaciadas. Son las fuentes cuyo ancho de letra es fijo, el mismo para todos los caracteres. El ejemplo típico de esta categoría es la Courier. Son muy claras y legibles, y se usan en los casos en que las tabulaciones, los espacios y los signos son importantes, como por ejemplo en el código de programación.

Ten en cuenta que esta clasificación es por sus rasgos predominantes. Las fuentes con serifa y sin serifa son de la máxima legibilidad; mientras que puede haber fuentes decorativas, manuscritas o monoespaciadas con o sin serifa, pero de menor legibilidad. Simplemente busca por la finalidad que le vayas a dar.

Categorías de fuentes en Google Fonts
Ejemplos típicos de cada categoría de fuente en Google Fonts.

Estilos y variantes

Dentro de una misma fuente podemos encontrar sus diversos estilos y variantes; y el catálogo de Google Fonts también nos permite acotar la búsqueda por estos criterios:

  • Thickness: es el grosor o peso del trazo, y básicamente puede ser Light (ligero o fino), Regular (normal) y Bold (negrita). Se corresponde con la propiedad font-weight de CSS. Tal y como veremos, a través de esta propiedad se pueden especificar grosores de 100 (el más fino) a 900 (el más grueso), en pasos de 100.
  • Slant: es la inclinación del trazo. Se dividen en Normal (trazo vertical), Italic (itálicas o cursivas) y Oblique (trazo oblícuo o inclinado). Google Fonts nos permite buscar fuentes por diversos grados de inclinación, no solo por estos tres. Se corresponde con la propiedad font-style de CSS.
  • Width: es la anchura del carácter respecto a su altura, y al igual que con Slant, podemos buscar distintos niveles de anchura, no solos los clásicos tipos Condensed (fuente condensada o estrecha) y Extended (fuente extendida o ancha).

Lo podemos ver en esta imagen:

Estilos de fuentes en Google Fonts
Clasificación de las fuentes por su estilo.

La ficha de cada fuente

En el listado general, haciendo clic sobre el nombre de la fuente, familia o specimen (como Google también las llama), accederemos a su ficha, donde podemos examinarla en detalle.

En esta ficha podemos ver, entre otra información, su juego de caracteres completo, todos los estilos disponibles, información sobre su autor, estadísticas de uso y textos de muestra, que podemos personalizar.

Otra funcionalidad muy interesante es que Google Fonts nos muestra las combinaciones más empleadas de esa fuente con otras, y nos permite previsualizar el resultado:

Combinaciones de fuentes con Google Fonts
En este ejemplo se muestra la combinación del título en Ubuntu con el cuerpo en Open Sans.

3.- Uso básico de Google Fonts

Si tanto en el listado como en la ficha de cada fuente hacemos clic sobre el icono (  ), estaremos añadiendo la fuente a la Caja de selección. En esta caja podemos tener una o varias fuentes seleccionadas, y Google Fonts nos muestra las diversas opciones para utilizarlas.

En la Caja de selección, la pestaña CUSTOMIZE nos permite seleccionar los estilos que vamos a emplear, de entre los disponibles para esa fuente; mientras que la pestaña EMBED nos muestra la URL de la API y el código completo que debemos insertar en nuestro archivo HTML o CSS, según el método que escojamos, como veremos después:

Caja de selección de Google Fonts

Descargar los archivos de fuentes

El uso más obvio y básico de Google Fonts es hacer clic sobre el icono de descarga (  ), en la Caja de selección arriba a la derecha, y descargarnos las fuentes seleccionadas en un archivo ZIP comprimido. Este archivo contiene cada una de las fuentes y estilos de nuestra selección en formato TTF (True Type Font), compatible con los principales sistemas operativos y navegadores.

Una vez tenemos los archivos podemos instalar las fuentes en nuestro equipo. Esto será imprescindible si queremos trabajar con ellas en nuestro programa de diseño gráfico o procesador de textos. Por ejemplo si queremos usar la fuente en un diseño web, pero además también necesitamos crear una imagen del logotipo con esa misma tipografía.

Usar las fuentes en nuestro diseño web

Normalmente procederemos a crear la carpeta fonts, en el directorio raiz de nuestro sitio, copiaremos en ella los archivos de fuente y en el archivo CSS los importaremos de esta forma:


/* Definimos la fuente (nombre y estilos), e importamos el archivo */
@font-face {
    font-family: "Montserrat";
    font-weight: 400;
    font-style: normal; 
    src: url("fonts/montserrat-regular.ttf");
    }
    
/* Y una vez definida ya podemos aplicarla en cualquier parte de CSS */
body {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 16px; 
    }

Obviamente puedes llamar la carpeta fonts como quieras, y también puedes cambiar el nombre de la fuente y de los archivos. Solo deben estar bien referenciados desde la hoja de estilos, con su URL relativa o absoluta.

Una vez cargada la fuente en nuestro CSS ya podemos hacer referencia a ella en cualquier parte de la hoja de estilos o de nuestro archivo HTML.

Es aconsejable que siempre establezcas uno o varios nombres de fuente alternativos, para el caso de que el archivo no se pueda cargar o no sea compatible. En el ejemplo solo he puesto el nombre genérico sans-serif, pero puedes poner varios.

También has de tener en cuenta que el navegador carga nuestro código HTML y CSS secuencialmente, en el mismo orden en que lo hemos escrito, por lo que debemos definir y cargar la fuente antes de hacer cualquier referencia a ella.

He de reconocer que hasta hace poco yo usaba este método, el de incluir una copia de los archivos de fuente, y es el que debemos emplear si no tenemos otra alternativa. Pero si nuestra fuente está en Google Fonts es mucho más aconsejable usar su API, tal y como vemos a continuación.


4.- Uso de la API de Google Fonts

La API (Application Program Interface) de Google Fonts nos permite usar cualquiera de sus fuentes en nuestras páginas web sin necesidad de descargarlas y de una manera muy sencilla, añadiendo apenas una linea de código a nuestro archivo HTML o CSS, según la opción que escojamos, dado que hay dos métodos.

Su implementación práctica consiste simplemente en añadir el código que nos muestra a la cabecera HTML de nuestra página (método Standard), o bien a nuestro archivo CSS (método @import).

Veamos los dos métodos, que son totalmente equivalentes.

El método Standard

Una vez hayamos seleccionado la fuente o grupo de fuentes que queremos usar, y también sus estilos y variantes, a través de la pestaña Customize, este método consiste en añadir la URL a la cabecera de nuestra página como si se tratara de cualquier archivo CSS externo.

Google Fonts nos muestra todo el código necesario, así que solo tenemos que copiarlo y pegarlo en la sección head de nuestra página.

En este ejemplo importamos la fuente Open Sans con los estilos 400 (regular), 400i (regular itálica) y 700 (negrita):

<head>
...
<!-- Enlace API de Google Fonts con HTML -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet">
...
</head>

Este es el método que Google recomienda, y el que yo uso. Creo que contribuye a mantener un código más claro y más control sobre nuestras dependencias, y también nos permite una mejor implementación dinámica de la URL, tal y como veremos en el apartado siguiente.

El método @import

El resultado es el mismo, solo que en este caso importamos la URL de la API mediante la regla @import de CSS, bien dentro de una etiqueta style, en la sección head de nuestra página, o bien al inicio de nuestro archivo CSS.

Para el mismo ejemplo anterior nos quedaría:

<head>
...
<style>
/* Enlace API de Google Fonts con CSS */
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700");
</style>
...
</head>

Se recomienda el método Standard, aunque este es igual de válido. De usarlo creo que es más aconsejable hacerlo en el archivo de hoja de estilos en lugar de en la cabecera de la página.

Usar las fuentes en CSS

Como podemos ver, lo que en definitiva hace la API de Google Fonts es incorporar a nuestro desarrollo una hoja de estilos (generada por la API) con las reglas @font-face de los archivos de fuentes y estilos que le hayamos indicado en la URL, tal y como haríamos nosotros usando nuestros propios archivos de fuentes.

Una vez hecho, mediante cualquiera de los dos métodos anteriores, ya podemos hacer uso de la fuente en cualquier parte de nuestro código, tanto en una hoja de estilos externa, como en la etiqueta style de la cabecera de nuestra página, como dentro de las etiquetas HTML con el atributo style. Si tienes dudas revisa el apartado anterior.

Por qué usar la API

Básicamente por motivos de compatibilidad, velocidad y eficiencia en nuestro trabajo:

  • Por compatibilidad: la API automáticamente servirá el formato de archivo de fuente más adecuado, según el navegador/sistema operativo del usuario.
  • Por velocidad: varios son los motivos por los que el uso de la API aumenta la velocidad de carga de los archivos de fuentes, tal y como servidores CDN optimizados o que la fuente ya se encuentre en la caché del navegador. Ten en cuenta que Google Fonts sirve billones de peticiones diarias.
  • Por eficiencia: no necesitamos mantener copia de estos archivos en nuestro servidor, ni especificar las reglas @font-face en nuestra hoja de estilos.

5.- Uso avanzado de la API

Puedes saltarte este apartado si no tienes buenos conocimientos de PHP. No es necesario para una implementación básica de Google Fonts.

Generación de la URL con PHP

Como podemos comprobar, tanto con el método de inserción llamado Standard como con el método @import, la URL de la API es la misma, y su formato general es el siguiente:

https://fonts.googleapis.com/css?family=nombre1:estilo1,estilo2|nombre2:estilo1,estilo2

Con esto y conociendo los nombres y los estilos de las fuentes que queremos usar, podemos implementar en PHP una sencilla funcionalidad que nos genere la URL de la API dinámicamente.

El siguiente es un ejemplo muy simplificado. Toma como base dos arrays conteniendo los nombres y estilos de cada fuente. Estos arrays pueden provenir de datos previamente guardados o de un formulario, donde el usuario selecciona cada fuente y sus estilos:


// Arrays numéricos de nombres y estilos de cada fuente:
$names = array( 'Open Sans', 'Montserrat' );
$styles = array( '400,700', '300i,400' );

// Imprime resultado:
echo 'URL API: ' .get_gfonts_url($names, $styles);

// Genera URL API de Google Fonts según nombres y estilos recibidos
function get_gfonts_url ( $names, $styles='' ) {

    // URL base:
    $url = 'https://fonts.googleapis.com/css?family=';

    // Parámetros para cada nombre:estilos
    $params = array();

    foreach ( $names as $key=>$value ):

        // Sustituye espacios por signo +:
        $names[$key] = str_replace(' ', '+', $names[$key] );

        // Crea parámetro:
        $params[$key] = $names[$key];
        if ( !empty( $styles[$key] ) )
            $params[$key] = $params[$key]. ':' .$styles[$key];

    endforeach;

    // Une parámetros:
    $params = implode('|', $params);

    // Crea url y devuelve:
    $url = $url .$params;
    return $url;

} // :get_gfonts_url()

Esta sencilla funcionalidad la tengo implementada en mi tema de WordPress, de manera que el administrador del tema puede instalar y posteriormente usar en CSS las fuentes de Google Fonts que quiera, solo configurando sus nombres y respectivos estilos.

Obtener un listado de todas las fuentes

Yendo un paso más allá, el uso avanzado de la API de Google Fonts también nos permite obtener un listado de todas las fuentes del catálogo y sus correspondientes estilos.

Para esto es necesario que dispongas de una clave API. Puedes obtenerla y consultar la documentación completa en la siguiente página:

https://developers.google.com/fonts/docs/developer_api

A continuación te muestro un ejemplo. Para probarlo guarda todo el código en un archivo PHP, introduce una clave API válida y ejecútalo en tu servidor:


// Introduce aquí tu clave API: 
$api_key = 'TU_CLAVE_API';

// Parámetro sort para obtener una lista ordenada (opcional)
// Posibles valores: trending|popularity|alpha|date|styles
$api_sort = 'trending';

// Creamos la url:
$api_url = 'https://www.googleapis.com/webfonts/v1/webfonts?key=' .$api_key. '&sort='.$api_sort;

// Ejecutamos petición con CURL:
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
$items_json = curl_exec($ch);

// Decodificamos objeto json devuelto:
$items_array = json_decode($items_json);

// Imprimimos para pruebas:
echo 'API URL: ' .$api_url.'<br>';
echo 'ITEMS ARRAY: '; print_r($items_array);


6.- Consejos finales

Usa solo las fuentes y estilos imprescindibles

El uso de la API de Google Fonts consume recursos, como es lógico, y por tanto reducirá la velocidad de carga de tus páginas, aunque los archivos de fuente ya se encuentren presentes en la caché del navegador del usuario.

Ten en cuenta que cada estilo que selecciones, dentro de cada familia, es un archivo distinto que el navegador debe descargar. Si usas las fuentes más populares aumentas las posibilidades de que ya lo tenga almacenado en su caché.

Ten en cuenta los distintos navegadores

Aún usando Google Fonts o nuestros propios archivos de fuente, cada navegador renderiza los tamaños y estilos de forma ligeramente diferente.

Sobre la propiedad font-weight, no todos los navegadores interpretan todos los grosores de fuente, de 100 a 900 en saltos de 100, por lo que es posible que no se muestren en todos por igual.

Por otra parte los navegadores generan automáticamente los estilos negrita e itálica sin que los configures en la API, aunque el resultado en general será peor. Por ejemplo si solo dispones del tipo normal, y en CSS usas font-style: italic, el navegador dibujará un carácter o glifo inclinado, que no es exactamente lo mismo que el estilo itálica o cursiva.

Antetodo busca la legibilidad y la versatilidad

Las fuentes de las categorías serif y sans-serif son de la máxima legibilidad, y por tanto las que normalmente se emplean como base de todo el sitio, en la etiqueta body y para el cuerpo de los artículos; mientras que las fuentes decorativas y manuscritas no siempre sirven ni siquiera para todos los títulos y encabezados.

Un buen diseño web solo necesita de dos o tres tipografías: la usada como base, para los cuerpos y todos los textos en general, la mono-espaciada, para mostrar código preformateado con las etiquetas code y pre; y otra fuente opcional que podemos utilizar en los títulos y encabezados. El logotipo del sitio debería ir en formato de imagen.

Así que no conviertas tu web en un repertorio de Google Fonts, a no ser que esta sea precisamente la funcionalidad que le quieras dar.


Y por último, ¡disfruta de esta gran herramientas que nos regala Google!

Si tienes cualquier duda deja tu comentario e intentaremos ayudarte.

Comparte esta página si te ha resultado útil. Compartir es una forma de ayudarnos a seguir creando estas guías gratuitas.

Guía completa de Google Fonts
5 de 6 votos.
Comparte... Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

No hay comentarios a Guía completa de Google Fonts

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *