Google+ Qué son y como utilizar las Web fonts de Google - tutorial - Miopiblog

miércoles, 20 de marzo de 2013

Qué son y como utilizar las Web fonts de Google - tutorial

Las web fonts de google, es uno de los recursos que más se viene utilizando por parte de desarrolladores, diseñadores y webmaster. Mediante este tutorial, intentaré explicarte qué son las web fonts o fuentes web de google, y cómo utilizar las fuentes en un sitio web.




¿qué son las web fonts de Google?


Comenzaré el tutorial, aclarando qué son las web fonts de Google:  las fuentes web de Google, consisten en una gran variedad de clases de fuentes web de código abierto, que Google pone a nuestra disposición de manera gratuita, claro está. Las web fonts de google, pueden ser utilizadas en cualquier sitio web, blog, tienda online, aplicación de internet... Utilizar este recurso, otorga más "personalidad" y favorece la legibilidad del contenido que alberga el site, aplicación, ó interfaz.



¿Cómo utilizar las web fonts de google? - tutorial


Utilizar las web fonts de google en un sitio web es sumamente sencillo. Me gustaría aclarar que Google, permite la descarga de sus fuentes a nuestra computadora, de manera que se podrían integrar en un sitio web, subiéndolas mediante ftp y creando un método de importación basado principalmente en CSS, es decir: @fontface (otra manera muy conocida).
Pero hay una forma mucho más sencilla de importar y utilizar las web fonts de google en un sitio web, sin calentarnos la cabeza ¿quieres saber cómo? pues sigue leyendo.

Lo primero que tienes que hacer para comenzar a utilizar web fonts de Google en tu sitio web o blog, acceder a la página de Web fonts de Google. Una vez que estés en el sitio web de fuentes de google, verás en la pantalla de tu dispositivo u ordenador, una especie de lista, en la que se muestran una gran variedad de fuentes de código abierto. Pues bien, elige la que quieras y haz click con el cursor del ratón, sobre el enlace en el que pone "Quick-use" ó "Quick-utilizar", se abrirá una nueva página. Desplázate un poco hacia abajo por la pantalla utilizando el scroll o la rueda del ratón y cuando llegues a un pequeño recuadro azul en el que se muestran las pestañas: "Estándar, import y javascript" detente, este recuadro es el que nos interesa.






Google nos facilita, mediante su interfaz de Google web fonts, tres maneras rápidas de implementar sus fuentes en un sitio web:



  1. Estándar - Este método para insertar y utilizar web fonts de google en un sitio web, es mi preferido. Copia y pega el enlace que te facilita google y pégalo entre las etiquetas <head> y </head> de tu sitio web. Una vez lo tengas, asigna la fuente a los elementos que desees, utilizando CSS.  Para que lo entiendas mejor, te pongo un ejemplo de como utilizar las web fonts de google de manera estándar:  Supongamos, que quiero utilizar una fuente llamada "Gabriela" y la quiero aplicar a las etiquetas de título <h1> de un sitio web. Lo primero que hago, es acceder a la página de web fonts, de la manera que he explicado antes. Una vez que tengo el recuadro delante, por defecto se muestra la etiqueta "estándar" abierta, si no es así, haz click sobre ésta. Ahora, copia lo que te muestra en el link: <Link href = '= http://fonts.googleapis.com/css?family Gabriela 'rel =' estilo 'type =' text / css "> y pégalo antes de la etiqueta </head> del archivo index ó pagina web a la que quieres que se aplique la fuente. A continuación, accede a la hoja de estilos CSS que tengas asociada a dicho archivo index o página, busca el elemento h1 y modifica o añade el atributo font-family, para asignar a ésta etiqueta, la nueva fuente que hemos agregado mediante un link en el archivo index, es decir, así: "font-family: ' Gabriela ', serif ;". Por lo tanto, nuestra etiqueta h1, podría quedar así en nuestra hoja de estilos CSS: " h1 { font-size:18px;font-family: ' Gabriela ', serif;color:blue;fot-weight:bold; } ". A partir de este momento, la nueve fuente quedará aplicada a cada etiqueta h1 que exista en el sitio web o documento html. También puedes optar por añadirlo directamente en el documento html, utilizando las etiquetas <style> e introduciéndolas entre <head> y </head>, como en la imagen que te muestro junto a este texto, un poco más arriba ; ).

    ¿te aclaras o no? jeje! bueno, por si acaso, también te ofrezco un videotutorial sobre cómo insertar webfonts de manera estándar en un sitio web, creo que te puede servir de ayuda ; )



    2. @import - Mediante @import, también se pueden añadir y aplicar web fonts a un sitio web o blog. Haz click sobre la pestaña que muestra el texto "@import", y copia el código que te muestran en la parte superior del recuadro azul.  Ahora, abre el archivo CSS al que esté vinculado el archivo html y pega el código. Asigna la fuente mediante el atributo font-family, como en el caso anterior, a las etiquetas, elementos o clases deseadas, guárdalo todo, súbelo al servidor y... ya está! También puedes añadir el código en el encabezado del documento html del página web, mediante <style> </style> e introduciéndo éstas, entre <head> y </head>, como en el caso anterior.



    Y por si acaso sigues con dudas, ahí va otro videotutorial, jeje! en este caso, te muestro como utilizar web fonts de google mediante el método @import:



    3. Javascript - Para insertar mediante javascript google web fonts en un sitio web, tienes que hacer click en la pestaña javascript del recuadro que he mencionado varias veces en este tutorial. Una vez que tengas el código que google nos facilita, delante de tus ojos, cópialo, y pégalo entre las etiquetas <head> y </head> del sitio web o documento html. Después, lo de siempre; asigna la fuente mediante font-family de CSS y... a funcionar con nuestra nueva fuente de Google.



Y como no, un vídeo explicándotelo todo detalladamente, que no falte, eh? jeje!!! Parece que está roto, pero no es así, se ve esta portada porque lo hice yo "a posta", para gastarte una broma, : )



¿has visto que fácil es utilizar web fonts de Google en un sitio web? puedes emplear la manera que más te guste, yo te recomiendo utilizar la estándar, ya que funciona bastante bien y es la más utilizada.

Por cierto, ¿estás a la última sobre todo esto de html5? si quieres, puedes echar un vistazo a algunos de los tutoriales html5 que te muestro en este blog... ó quizá prefieras ver algo de lo que voy publicando sobre CSS3.

No te olvides de seguirme en las redes sociales, así estarás siempre al día sobre nuevos tutoriales y quien sabe... quizá en alguno de ellos explique otra manera diferente de insertar web fonts de google en un sitio web : )


Seguidores (seguir blog)

Me siguen en google plus: