Lo primero que pensé es “seguro que tiene truco y al final es tipografía en imagen o algo que no funciona en todos los navegadores”, aunque me dió mucha confianza de que llevara la palabra Google delante. Estuve bastante tiempo leyendo con mucha atención (sobre todo porque estaba en inglés y sólo me enteraba de la mitad, luego la neurona me funcionó y me acorde de que el traductor de Google está para algo).
Cuando acabé de leer, mi grado de felicidad como diseñadora (harta de las mismas tipografías en web) había crecido, pero todavía me quedaba un punto de incredulidad, lo unico que faltaba era probarlo.
Al día siguiente hice la prueba y como diría mi sobrina “Pa mi, pa siempre”. Funciona genial, se ve incluso en los móviles perfectamente y en los ipad e iphone.
El enlace es Google web fonts y creo que hay varias maneras de utilizarlo. Yo os pongo la mas sencilla y la que yo he usado.
Lo primero que ves cuando entras es un listado de tipografías, cuando encuentras la que te gusta haces click sobre ella y aparecen varias pestañas con todo tipo de información, (vista de la tipo en varios tamaños, información general, caracters que tiene la tipográfia, descarga y “usa esta fuente”)
Todos son interesantes pero me quedo con los dos últimos:
- En descarga tu puedes bajarte la tipografía para poder usarla en tu ordenador para ver el efecto en tus diseños
- En “usa esta fuente” te explica los pasos a seguir para usarlo en tu web.
Los pasos a seguir son muy sencillos. Yo en micaso elegí la tipografía Oswald y en esa pestaña Google me da el enlace que tengo que meter en mi html.
Dentro del head colocamos
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
y despues especificas en todos los estilos donde quieras usarlo ejemplo:
h2 {
margin:1.5em 0 .75em;
font: 25px 'Oswald',Trebuchet,Arial,Verdana,Sans-serif;
line-height: 1.4em;
text-transform:normal;
letter-spacing:0em;
color:#999999;
}