Tutorial: Como usar la API de Google Font

por .

Si google tiene una característica buena para los programadores es que todas sus APIs son muy fáciles de implementar, desde la API de Google Maps que esta tendencia se viene repitiendo, y por suerte para nosotros la API de Google Font no es la excepción.

Hoy me puse a jugar un poco con ella y quería comentarle a modo de guía básica como funcionar, para que sirve y sobre todo como implementar esta fantástica herramienta. Comencemos.

tutorial google fonts

¿Para que sirve la API de Google Font?

Principalmente para que podamos utilizar cualquier familia de tipografías en nuestro sitio web, independientemente de las que son consideradas por defectos en los navegadores más populares.

Siempre fue una critica hacia los navegadores las pocas tipografías aceptadas por defecto, pero desde hace un tiempo existen varias alternativas como FLIR para que los diseñadores puedan implementar cualquier familia de fuentes. No obstante muchas de estas alternativas tienen varias contras, como su compleja implementación.

Todos estos pormenores hicieron que CSS se tome en serio el asunto y casi por arte de magia en su versión 3 logre implementar font-face, una propiedad que permite definir cualquier tipografía en base al archivo fuente de la misma. Y es ahi donde justamente donde Google se puso a trabajar brindando un api para hacer el trabajo sucio.

¿Cuando debería utilizar la API de Google Font?

Aquí vamos a encontrarnos con varias opciones y cada uno debería poder determinar cuando merece la pena usar un API y cuando no. A mi me gusta evaluarlo de la siguiente forma y decido utilizar un API cuando:

  • Necesito utilizar distintas familias de tipografías no instaladas por defecto y no quiero tener que trabajar en subir los archivos de las fuentes, ni definirlas manualmente en mi CSS.
  • Cuando quiero ahorrar transferencia. Ya que la transferencia ocasionada por el archivo de la tipografías corre por cortesía de Google.
  • Cuando quiero velocidad. Es similar al caso anterior, pero aquí hagan pruebas, muchas veces la paralelización de descargas desde distintos host acelera considerablemente el tiempo de descarga de un sitio web, otras veces….no tanto.

Bien, me gusto ¿Que necesito para empezar?

Solo tiempo y un poco de ganas.

Ademas y antes de comenzar te voy a recomendar que mires la lista completa de tipografías incluidas en el API que si bien no son millones son unas cuantas, numero que muy posiblemente aumente en los próximos meses.

¿Como puede implementar el API en mi sitio?

Muy pero muy fácil, con una simple linea de código.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

No es muy difícil darse cuenta que lo único que tenemos que cambiar es la Font+Name para habilitar la tipografía en nuestro sitio. Si lo deseamos y queremos usar más de una tipo vamos a indicarlas como parametros separados por |

Por ejemplo vamos a activar las tipografías Tangerine, Inconsolata y Droid Sans:

http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans

Luego vamos a definir la nueva tipografia instalada en nuesta hoja de estilo de la siguiente forma:

h1{font-family: 'Tangerine', serif; color: green}

Es decir, que prácticamente estaremos trabajando con nuestra hoja de estilo como lo hicimos siempre.

¿Un ejemplo de utilización completo?

<html>
<head>
<title>Ejemplo de uso de la API de Google Fonts</title>
<link rel="stylesheet" type="text/css"
href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

<style>
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-size:30px;
font-family: arial; }
h1, h2, h3{margin-bottom:10px; padding:0;}
h1{font-family: 'Tangerine', serif; color: green}
h2{font-family: 'Inconsolata', serif; color: blue}
h3{font-family: 'Droid Sans', serif;color: red}
</style>

</head>

<body>
<h1>Escribiendo con Tangerine!</h1>
<h2>Escribiendo con Inconsolata!</h1>
<h3>Escribiendo con Droid Sans!</h1>
</body>

</html>

Y el resultado lo pueden ver online directamente.

Utilizar la API de Google Fonts, es realmente fácil y por las pruebas que hice es bastante rápido el renderizado de las distintas familias de tipografías, por lo que su uso es bastante recomendado.

¿Desventajas de uso?

Si bien estoy bastante contento con el resultado no creo que por el momento la API de Google Fonts reemplace a los sistemas que se vienen utilizando hasta el momento para generar compatibilidad con tipografías no instaladas por defecto, las principales razones son:

  • No hay todavía disponibles muchas familias de fuentes.
  • Muchas personas no quieren depender de un tercero a la hora de servir sus sitios.
  • Si el API falla todo nuestro sitio va a mostrar las tipografias por defecto con un resultado probablemente bastante desagradable (aunque esto se puede configurar desde el CSS como siempre)
  • Si el navegador no tiene compatibilidad con la propiedad font-face también va a mostrar una fuente por defecto.

Finalmente…

Si bien tenemos cosas a favor y en contra, jugar un poco con Google Font me gusto mucho, creo que es una API con futuro si se mejora el repositorio de archivos tipográficos, brindando más posibilidades que las pocas que hay hoy en día.

Categorizado en: