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

. May 1, 2015.

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.

facilisto está...

¡Bienvenido emprendedor, soy Facilisto!

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

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.

facilisto está...

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:

Comentarios

Comentarios

Más de SEO

Recibe un resumen de nuestros mejores artículos y recursos GRATIS en tu email

Como tú, tampoco nos gusta el spam, por lo que solo te escribiremos 1 vez por semana

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR