compartimos
la actualidad contigo

28 jun 2011

Usa cualquier fuente en html Google Fonts

El otro día fué sin duda un día de suerte, mirando entre la multitud de entradas de post que me llegan al Netvibes, me llamo la atención una frase "Usa cualquier fuente en html" . 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.

El otro día fué sin duda un día de suerte, mirando entre la multitud de entradas de post que me llegan al Netvibes, me llamo la atención una frase "Usa cualquier fuente en html" .

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

y despues especificas en todos los estilos donde quieras usarlo la clase o estilo

h1 { font-family: ´Oswald´, arial, serif; }

Sencillísimo ¿verdad?. pues ya está listo.

¡Hasta pronto!

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

y despues especificas en todos los estilos donde quieras usarlo la clase o estilo

h1 { font-family: ´Oswald´, arial, serif; }

Sencillísimo ¿verdad?. pues ya está listo.

¡Hasta pronto!

Otras noticias
16 feb 2017

Presentación de la plataforma Areas Empresariales Gijón

Esta semana ha tenido lugar la presentación de una nueva plataforma web que facilita la búsqueda de una ubicación en nuestra ciudad. Ticmedia ha colaborado en el desarrollo de la nueva web. 

06 feb 2017

Cómo indicar en el móvil el contacto en caso de accidente.

Los sistemas de bloqueo de nuestros smartphones han cambiado todo y la iniciativa Aa que se inició en 2009 ha quedado obsoleta. ¿Cómo podemos indicar con quién contactar en esta nueva situación?