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
23 sep 2021

Trabaja con nosotros y forma parte de nuestro equipo

En Ticmedia estamos buscando programador/a con experiencia de al menos dos años en PHP para la gestión y el desarrollo de portales web y aplicaciones en importantes proyectos de larga duración en diferentes sectores.

01 sep 2021

Ciberataques a hospitales durante la pandemia

Como centros neurálgicos de la pandemia, los hospitales se han convertido en uno de los objetivos más deseados por los hackers desde la llegada del Covid-19. La información sensible relativa a los pacientes y a la investigación médica han sido las más atractivas a los hackers a la hora de robar información en los sistemas sanitarios y pedir un rescate por ella. 

programación web :: ticmedia.es
Fondo Social Europeo
Servicio Público de empleo

Ticmedia Soluciones profesionales S.L es beneficiaria de una subvención cofinanciada por el Principado de Asturias, el Fondo Social Europeo y la Iniciativa de Empleo Juvenil (en el marco del Programa Operativo de Empleo Juvenil 2014-2020) por la celebración de contratos en prácticas