Muchas veces nos encontramos en la situación de elegir tipografías en el blog.  Tardas horas en decidirte por las que hay porque no te gustan o simplemente no coinciden con tu estilo. Pero gracias a Google Fonts es posible acceder a una amplia colección de cientos de fuentes libre de derechos y muy fácil de instalar en pocos clicks. Tanto si estás trabajando en un proyecto web o simplemente las actuales de tu web te aburren, no te preocupes, te traigo un tutorial muy práctico para solucionar parte de la estética de tu blog.

Actualmente, la colección de Google Fonts cuenta con unas 816 tipografías, y sí, completamente gratuitas.

1. Entra en la web de Google Fonts

1

La verdad es que desde la última vez que eché un vistazo a este web, ha mejorado muchísimo en su diseño web y UI. Me encanta la experiencia de usuario que ofrece Google Fonts, rápida y sencilla.

Para acceder a la nueva página web tendrás que ir a https://fonts.google.com/ ya que https://www.google.com/fonts te redirigirá a ella.

2. Busca la tipografía ideal para tu web

2

Haz click en el icono de lupa para refinar los resultados por varios filtros (categorías, idiomas, estilo etc).

3

Si eres una persona curiosa como yo, haz click en el título para ver en detalle su ficha. En esta sección podrás descubrir un poco sobre la historia detrás de la fuente, su diseñador y el uso global. Además, al final de la página te muestra emparejamientos populares con esa misma fuente.

3. Añade la deseada a tu colección

Una vez te hayas decidido por las que más te gustan para tu web, haz click en el icono + para añadirla a tu colección. Al darle al botón verás que aparece una pestaña en la parte inferior derecha de la ventana con las fuentes que has seleccionado.

EN EL BLOG -  Verificar y comprobar archivos PDF desde Acrobat

Google Fonts

 

4. Personaliza fácilmente la fuente

4

Ves al apartado customize para personalizar tus fuentes. En este caso se refiere a los estilos de texto o soporte de idiomas. ¡Ojo! No te recomiendo que pierdas demasiado tiempo con las personalizaciones porque eligiendo tantas opciones, es probable que tu página web tarde más en cargar. Simplemente fíjate en la barra de color verde. Cuantas más opciones elijas, más te acercarás al color rojo (peligro).

5. Copia y pega el código HTML a tu web

5

Accede al editor de código de tu web y busca la etiqueta <head>, dentro de ella (y antes de </head>) pega el código HTML de Google Fonts. No te olvides de añadir la regla CSS font-family a aquellos elementos que quieras aplicar la fuente. Esto se puede hacer añadiendo el código dentro de las etiquetas <style></style> o en línea.

Consejo: te recomiendo no instalar demasiadas fuentes ya que esto hace que tu web vaya más lento. Unas 2-3 fuentes son suficientes.

Google Fonts es una de los mejores recursos de tipografías que existen en la red, como ves. La presentación y pre visualización de las mismas junto con información detallada, ofrecen una experiencia de usuario muy sencilla y divertida a la vez.

Espero que te haya sido de utilidad este tutorial. Si lo has probado menciónanos en Twitter @desfaziendo o deja un comentario al final del post.

Summary
Cómo añadir Google Fonts a tu página web
Article Name
Cómo añadir Google Fonts a tu página web
Description
Personaliza tu página web o blog con Google Fonts en un par de clicks para darle un toque más personal a tu sitio online.
Author
Desfaziendo Entuertos