Guía: usar Google Fonts en blogs o páginas web

La vía principal para transmitir un mensaje son las palabras y tener una tipografía fácil de leer y elegante, lo cual le da una personalidad a lo que quieres decir. Así que si quieres retocar tu estilo un poco, este artículo es para ti. Hoy te presento la forma más fácil de usar las tipografías correctas en tu blog, página web o app con Google Fonts desde hoy mismo.

Hoy te mostraré la importancia de usar la tipografía correcta en tu diseño de marca y la opción de Google Font. Aprenderás a instalar cualquier fuente disponible en tu web y algunos consejos para parecer más profesional.

¿Qué esperas? Sigue leyendo…

Guía: usar Google Fonts en blogs o páginas web
Guía: usar Google Fonts en blogs o páginas web

Para explicar mejor la importancia de la tipografía en el diseño web te dejo un video corto de Brand Inteligente:

¿Qué es Google Fonts?

El tipo de fuente que usas en tu logotipo, en tu página web y en tus diseños sí importa ¡y muchísimo! En los inicios de Internet no tenías otra opción que usar Arial, Georgia o Times New Roman, pero ahora tienes un abanico infinito de posibilidades para darle más vistosidad a tu marca.

Google Fonts es un banco gratuito de tipografías que puedes usar en tus contenidos web. Los estilos no son tan variados como otros catálogos, pero sin duda que hay buenos trabajos allí de los cuales te puedes enamorar.

Guía: usar Google Fonts en blogs o páginas web
Guía: usar Google Fonts en blogs o páginas web

Características de Google Fonts

Lo que hace que Google Fonts sea tan bueno:

  • Fáciles de usar.
  • Compatibles con casi todo lo que use Internet: tipos de pantallas, versiones y lenguajes.
  • Puedes agregar tus Google Fonts favoritas a una colección.
  • Ofrece estadísticas del impacto de la fuerza en la velocidad de carga de tu página web.
  • Permite escoger los paquetes de caracteres disponibles y alfabetos.

«Debes descargar la fuente y después vincularla al servidor.»

Open Sans (de Steve Matterson) es la tipografía más usada de Google Fonts aunque puedes ir probando poco a poco cuál es la que se adapta mejor a tu estilo.

Guía: usar Google Fonts en blogs o páginas web
Fuente de imagen: Google Fonts

”La tipografía web tiene que crear una buena experiencia de lectura”

Integrar las Google Fonts a tu contenido

Para usarlas debes tener un conocimiento mínimo de HTML y CSS y seguir las instrucciones:

  • Anda a Google Fonts.
  • Busca la tipografía que quieras.
  • Selecciona el estilo que quieras.
  • Una vez que selecciones tu tipografía, haz clic en Quick Use.
  • Copia el código HTML Standard que te ha dado en la cabecera de tu blog o página web, entre las etiquetas “header” (<head> y </head>).

Guía: usar Google Fonts en blogs o páginas web

  • Integra la fuente en tu código CSS en los elementos que quieras (hoja de estilo)

Guía: usar Google Fonts en blogs o páginas web

Por ejemplo:

Guía: usar Google Fonts en blogs o páginas web

  • Guarda los cambios. Refresca la página y mira qué tal ha quedado.

¡CUIDADO! Si modificas la fuente de tu tema directamente en WordPress perderás los cambios en tu hoja de estilo si se actualiza. Lo recomendable es crear un tema hijo para hacerlo.

Si quieres saber qué más puedes hacer con tus Google Fonts, te recomiendo leer la guía de uso (en inglés) que está muy completa.

No te olvides de cuidar muy bien los colores, el tamaño de la fuente, la alineación del texto, el espaciado y por supuesto, la ortografía.

Para optimizar aún más, te dejo un manual sobre el buen uso de la tipografía en el diseño web que te interesará muchísimo.

Si necesitas más ayuda con la tecnología en tu negocio web, ¡contáctanos! Gratis y sin compromiso.

Mis tipos de Google Fonts favoritos por su simplicidad y elegancia son las denominadas “tipografías seguras” como: Open Sans, Source Sans Pro, Montserrat, Roboto, Habibi, Amethysta, Libre Baskerville, Noto Serif y Abril.

Y si quieres saber qué tipo de tipografía tiene una imagen, puedes usar la herramienta WhatFontIs (desde una URL o tu ordenador).

No te olvides de combinar las Google Fonts con buenas imágenes y usar los colores correctos para que tu tipografía resalte aún más.

Los principios establecidos de la tipografía podrían compararse a los principios que subyacen en la arquitectura o la música. – WilliKunz

Si te gusta esto de la tipografía y el diseño, te invito a que veas la película “Helvetica”. Te dejo su tráiler para que veas de qué se trata más o menos:

Te invito a leer más sobre el diseño web de tu marca:

Autor
David Polo Moya
David Polo Moya

Nacido en Madrid, de 43 años. Licenciado en Business por la Universidad de Portsmouth (Reino Unido) MBA por el Instituto de Empresa en Madrid (España) e Indian Institute of Management en Calcuta (India). Emprendedor recurrente, David Polo es el fundador de Time Management, consultora de sistemas de gestión con más de 10 años de experiencia y por otro lado los blogs emprender-facil.com y gestionar-facil.com. Consultor independiente de emprendedores y empresas, en análisis, gestión y medición de datos, David Polo se enfoca en el desarrollo empresarial a través del uso de Plataformas de gestión, consultoría estrategia y de innovación y ayuda a emprendedores y empresarios. Visita mi perfil en about.me: https://about.me/davidpolomoya