Google Font

Google lanzó una aplicación llamada Google Font que nos permite a los desarrolladores utilizar tipografías distintas a las estandar, consiguiendo así darle un toque diferente a la web y todo ello sin tener que subir archivos de tipografías a nuestro servidor. 

Veamos entonces algunos puntos que nos interesará saber...

¿Qué tipografías tengo disponibles para utilizar?

Pues las tienes todas en este catálogo de tipografias que Google ha confeccionado. Ahora mismo hay disponibles unas 18 familias no obstante, es más que obvio que este número irá creciendo!!

¿Qué ganamos los desarrolladores web utilizando esta aplicación?

• Ahorraremos tiempo en transferencia
• Ganaremos en velocidad de carga de la página
• Podremos utilizar distintas familias de tipografías en una misma página web, pero ojo!! que esto no signifique que vayamos a dejar de lado la estética y la usabilidad de una web. 

¿Cómo uso estas fuentes del Google Font Directory?

Es tan sencillo como hacer una llamada a una hoja de estilos que Google habrá creado y publicado en Internet. O lo que es lo mismo, copiar esta línea de código en el de nuestra página:

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

Donde deberemos cambiar tan sólo el dato referente a el nombre de la fuente o "Font+Name, por ejemplo si queremos untilizar la fuente Cantarell ecribiremos:

< link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css' >

Más fácil todavía! desde el Google Font Directory podremos obtener el código directamente pulsando en "Get Code" dentro de la previsualización de la fuente:

Un tip!! Si queremos sintetizar el código cuando vayamos a utilizar más de una fuente lo podemos expresar así en tan sólo una línea de código:

< link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans" >

Y básicamente es todo lo que hay que hacer. La verdad es que es sencillo y ventajoso.

Ejemplo:

< 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: #fff;
text-align: center;
font-size:30px;
font-family: arial; }
h1, h2, h3{margin-bottom:10px; padding:0;}
h1{font-family: 'Tangerine', serif; color: #333333;}
h2{font-family: 'Inconsolata', serif; color: #333333;}
h3{font-family: 'Droid Sans', serif;color: #333333;}
< /style >

< /head >

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

< /html >