Google fonts

Hola a todos, hoy os explicare el servicio de Google, Google fonts, que se usa para darle una fuente al texto de nuestra web.

Lo primero que haremos es entrar en el servicio de Google, http://www.google.com/webfonts.

Veremos que hay una gran cantidad de fuentes, de distintos idiomas y estilos.

captura 1 google fonts

Cuando encontremos una fuente que nos guste, pinchamos en el enlace Quick-use. Nos aparecerá una serie de pasos, estos son:

  • El paso 1: nos informa de la carga que tendrá la fuente en nuestra web.

paso 1 google font

  • El paso 2: elegimos el juego de caracteres.

paso 2 google font

  • El paso 3: nos da el código para que lo insertemos en nuestra web. Puede ser en linea de código, con un @import o con javascript.

paso 3 google fonts

  • El paso 4:  lo integramos con la propiedad CSS, font-family, tal como nos aparece en la siguiente imagen.

paso 4 google font

Vamos a ver un ejemplo practico, sobre como insertar la fuente en un documento HTML con un CSS. Haremos lo siguiente:

  • Elegimos la fuente deseada, en este caso hemos elegido la fuente Freckle Face.
  • Pinchamos en Quick-use.
  • Copiamos el código que nos ofrece dentro de la etiqueta head.

head google font

  • Añadimos la propiedad CSS, font-family, con el nombre que nos indica en google font. 

ejemplo google font

ejemplo google font 2

  • Miramos como queda.

ejemplo google font 3

Por ultimo, deciros que también tenemos la posibilidad de guardar físicamente las fuentes de google fonts con la opción Download your collection.

Espero que os sea de ayuda.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *