Utilizar fuentes de texto de Google Web Fonts

Publicado el en la categoría Diseño y Programación

Si en alguna ocasión has visto un sitio web con unas fuentes de texto muy diferentes a lo que estamos acostumbrados a ver, puede ser que dicho sitio esté utilizando el servicio de Google Web Fonts. gracias a un sencillo código generado por ésta web, podremos utilizar gran cantidad de fuentes de texto, desde las mas modernas hasta las mas clásicas e incluso las manuscritas.

Vamos a ver los pasos necesarios para que nuestra web sea capaz de utilizar una de las muchas fuentes disponibles en Google Web Fonts.

Lo primero será seleccionar la fuente que vamos a utilizar. En el lateral derecho podemos filtrar por el tipo de fuente que queremos (Serif, Sans Serif, Display o Handwritting).

En la parte superior tenemos varias pestañas en las cuales podremos visualizar una palabra, una frase o un párrafo completo de cada tipografía. Además, podemos definir el texto que queremos visualizar y su tamaño en la casilla Preview Text. Deberemos pulsar sobre el botón Add to Collection en cada una de las fuentes que nos guste.

google-web-fonts

Pulsando sobre el botón Review situado en la zona inferior, podremos comparar todas las fuentes que tengamos seleccionadas y así facilitar la decisión de elegir una de ellas. Una vez hayamos tomado una decisión, deberemos desmarcar las fuentes que no queramos, con la opción Use this style

Ahora, pulsaremos sobre el botón Use de la zona inferior. Nos aparece una nueva página en la que podremos seleccionar y deseleccionar de nuevo las fuentes que deseamos utilizar. Esta sección se denomina 1. Choose the styles you want También nos aparece un contador de la velocidad de carga, pues hay que tener en cuenta que cuantas mas fuentes agreguemos, mas tiempo necesitará la pagina para cargarse.

Continuaremos bajando hasta la sección 3. Add this code to your website en donde nos aparece el código que debemos agregar a nuestra web. Tenemos tres métodos distintos para la inserción:

Standard: Que agregaremos en el <head> de nuestra web como si de otra hoja de estilos se tratase:

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

Import: Haciendo el import directamente en la hoja de estilos CSS

@import url(http://fonts.googleapis.com/css?family=Inder);

JavaScript: Insertando código Javascript directamente entre las etiquetas <head> de nuestra web

<script type="text/javascript">
   WebFontConfig = {
     google: { families: [ 'Inder::latin' ] }
   };
   (function() {
     var wf = document.createElement('script');
     wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
       '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
     wf.type = 'text/javascript';
     wf.async = 'true';
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(wf, s);
   })(); </script>

Como puedes observar en cada uno de los códigos anteriores, siempre aparece el nombre de la fuente seleccionada, que en nuestro caso es Inder.

Para utilizar la nueva fuente de texto, tan solo nos quedará agregarla en nuestra hoja de estilos, por ejemplo:

body {
  font-family: 'Inder', serif;
  font-size: 46px;
}
Facebooktwittergoogle_plus