Google Web Font

Google nos da la oportunidad de usar diferentes tipos de letra en nuestro sitio web. Y lo ofrece de una manera muy sencilla que vamos a aprender en este post.
Para empezar, vayamos a la página de Google Web Font y veamos cómo funciona.

A la izquierda tenemos un menú que nos sirve de filtro para encontrar con más facilidad el tipo de fuente que estamos buscando.

Google Web Font en tu página web

Una vez elegida la tipografía, en mi caso he elegido Oleo Script, hacemos clic en uno de los enlaces que hay en la parte derecha de la pantalla: “Quick-use” que nos dirige a otra pantalla dividida en diferentes módulos.

  1. En el primero te da a elegir entre los diferentes estilos que tiene la fuente. En este caso nos ofrecen dos y nosotros podemos incluir en nuestra págína los dos o solo uno de ellos. Ten en cuenta que cuantas más tipografías estés utilizando en tu página, más peso tendrá la misma y en consecuencia tardará más a la hora de cargarse. Después de todo, un página web se compone de diferentes archivos, y tenemos que procurar que pesen lo menos posible.
  2. En el segundo módulo puedes elegir entre los tipos de caracteres que te ofrece. (Google nos advierte en un pequeño texto a la derecha que debemos utilizar solo el lenguaje que vamos a necesitar ya que de ello dependerá en parte el peso final de nuestra página.)
  3. El tercer cajón es el que nos interesa. Aquí es donde vamos a copiar el código para nuestra página. Es el el enlace a la tipografía. En nuestro ejemplo:
     

    Esta línea de código tenemos que pegarla entre las etiquetas <head> y </head> de nuestra página. 
  4. En el cuarto y último módulo nos dan un ejemplo de cómo utilizar nuestra nueva fuente.
     

Si tenemos un titular  al que queramos añadir esta fuente (Oleo Script), debemos tener en cuenta que trabajamos con la propiedad css font-weight de 400 y 700 en esta tipografía. Podemos usar cualquiera de las dos en tantas etiquetas como queramos:

Este es un ejemplo de uso de Google Web Font

Para los maquetadores, es una ventaja poder utilizar este tipo de recursos que ofrece Google. Puedes darle un toque personal a tu proyecto con una tipografía diferente, simplificas el peso de la página, ya que las tipografías están ubicadas en servidores de Google y además y no menos importante, son fuentes de código abierto, gratuitas. ¡Así que solo queda disfrutar! 🙂

2 Respuestas

Hacer Comentario

Su dirección de correo electrónico no será publicada.