Utilizar fuentes de Google en nuestra web

Veamos un ejemplo de cómo utilizar las fuentes de Google en nuestra web, las llamadas Google Fonts.

Google

Editado (2021-09-10): Este artículo que se ha quedado desfasado. Google Fonts se ha actualizado y ha cambiado su forma de uso. Lo dejamos online para poder mostrar un poco la historia de este servicio de fuentes Google que desde hace tiempo que nos facilita el uso en nuestros blogs y webs. La esencia es la misma, pero cambia el modo de capturar los datos. Crearemos un nuevo artículo mostrando como se hace actualmente.

Google dispone de una sección en la que proporciona a los desarrolladores web y diseñadores multitud de fuentes gratuitas para utilizarlas desde cualquier web.

Para ello, solo hay que:

  • Visitar su web Google webfonts
  • Buscar y escoger la fuente deseada
  • En la parte inferior derecha tenemos la opción ‘Quick Use’
  • Sale el código a insertar en el head de la página y como usarlo en la hoja de estilos

Sólo queda poner el código <link> en el encabezado de la web (dentro del <head>) y luego, en nuestras hojas de estilo CSS poner a una clase el atributo font-family que toque. De este modo, ya podemos utilizar la fuente… Atentos al acelerómetro que nos indica la fuente (parte superior derecha de la captura) que nos indica cuánto tiempo tarda en cargarse…

De una manera sencilla y rápida, disponemos de multitud de atractivas fuentes para poner en nuestra web