Hoy hablamos de…

Google Fonts en WordPress

Tiempo de lectura: 3 minutos

La importancia de la tipografía en el diseño web

A estas alturas del partido a nadie se le escapa la importancia de escoger una tipografía adecuada en cualquier diseño, pero cuando hablamos de diseñar una web las implicaciones van un poquito más allá de la estética, por eso hoy quiero hablarte del uso de Google Fonts en WordPress.

Tipografía y rendimiento web

En los albores de internet, las personas que se dedicaban a esto del diseño web utilizaban «web safe fonts» o «tipografías seguras», es decir, las tipografías que vienen instaladas por defecto en cualquier equipo: arial, verdana, times new roman… ¡incluso comic sans! Esta era la forma más sencilla de asegurarse de que las personas usuarias podrían visualizar correctamente el sitio web, tal y como se había diseñado.

Niño con un ordenador de los 90 muy satisfecho con su trabajo

Obviamente, esto suponía unas limitaciones de diseño que era necesario subsanar, y comenzaron a utilizarse soluciones un tanto ortopédicas, como pequeños fragmentos de Flash (a cascarla el rendimiento) o sustituir los párrafos por imágenes (la pesadilla de cualquier SEO).

Hoy en día, de forma muchísimo menos aparatosa, podemos alojar las fuentes en nuestro servidor o integrar bibliotecas de fuentes a través de pequeñas líneas de código en nuestro sitio web.

¿Qué hay que tener en cuenta para escoger una tipografía?

Hombre pensando mientras flotan en el aire fórmulas matemáticas
  • Legibilidad
    No te olvides nunca de que el objetivo principal de cualquier texto es que lo lean, así que no compliques la experiencia de tus personas usuarias con tipografías recargadas.
  • Tu público y tus objetivos
    Al igual que los colores, las imágenes y las propias palabras, las tipografías evocan emociones diferentes. Por eso, dependiendo de a quién te dirijas y qué quieras contarle, habrá tipografías que se adecuen más o menos a tus necesidades, pero eso merecería su propio post.
  • Versatilidad
    Escoge una familia tipográfica que tenga la mayor cantidad de variantes posibles: que si thin, que si regular, que si bold, que si extra bold, que si italic, que si italic bold… Esto te va a poner mucho más fácil establecer una jerarquía visual en el texto sin perder cohesividad en el diseño.
  • Caracteres especiales
    Aunque a veces se nos olvida, no en todos los idiomas se utilizan eñes y acentos, así que antes de comprometerte con una tipografía comprueba que tiene todo aquello que necesitas.
  • Licencia
    Asegúrate de que la fuente escogida tiene licencia para el uso que quieres darle, no te metas en un lío a lo tonto. Ç

Google Fonts, ¿qué es y cómo me puede ayudar?

Página de inicio de Google Fonts
https://fonts.google.com/

Google Fonts es un repositorio de fuentes de código abierto que vas a poder integrar en tu web en un tris. Algunas de sus ventajas son:

  • Compatibilidad
    No vas a tener que preocuparte por si la fuente escogida va a verse bien o no en todos los dispositivos, estas fuentes son compatibles con casi todos los cacharros, tamaños de pantalla y lenguajes de programación.
  • Variedad
    A día de hoy Google Fonts cuenta con casi 1500 fuentes repartidas entre serif, sans serif, display, handwritting y monospace. Además, para cada fuente tendrás información acerca de los caracteres especiales que incluye y los idiomas que soporta.
  • ¡Es súper fácil de usar!

¿Cómo integrar Google Fonts en una web?

Si utilizas constructores como Divi o Elementor no tienes que preocuparte por nada, ya que la biblioteca de fuentes de Google Fonts viene integrada, con lo cual sólo tendrás que configurar las fuentes que quieras utilizar en tu personalizador de temas.

Pero si el constructor o tema que utilizas no trae Google Fonts de serie tienes un par de opciones igual de sencillas y rápidas.

  • Puedes añadir la API de Google Fonts al header de tu web, es una pequeña línea de código que te permitirá utilizar cualquier fuente del repositorio, pero aquí te lo explican mejor que yo 👉 ¿Cómo usar Google Fonts en mi sitio web?
  • Si el código no es lo tuyo o te da un poco de respeto (merecido), puedes utilizar un plugin como este de aquí 👉 Google Fonts Typography

Otro día te enseño algunas combinaciones tipográficas de Google Fonts que me encantan y estoy deseando usar en los proyectos web de 2023 😉 Aunque si te pica la curiosidad puedes cotillearlas en mi cuenta de Instagram

¡Hasta pronto!

Niña rubia lanzando un beso

0 comentarios

Enviar un comentario

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

También te podría interesar

Identidad visual y diseño web

Identidad visual y diseño web

¿Es necesario que la identidad visual y el diseño web vayan de la mano? La identidad visual y el diseño web son elementos clave para la presencia on-line de cualquier negocio. Juntos, estos elementos pueden tener un impacto significativo en la percepción de tu marca y...

Página de error 404 personalizada

Página de error 404 personalizada

¿Qué incluir en una página de error 404? Ya sea como usuaria o como profesional de la web, seguro que la página de error 404 no te resulta ajena. Se trata de un error que se produce cuando llamamos a una URL que no existe, ya sea porque no la hemos escrito de forma...

Las mejores fuentes de Google 2023

Las mejores fuentes de Google 2023

Combinaciones tipográficas de Google Fonts Hace unos días te contaba porqué es recomendable utilizar fuentes de Google Fonts en Wordpress y te prometí un post con las mejores fuentes de Google en 2023 que sí o sí voy a utilizar este año en mis proyectos de diseño web....

¿No quieres perderte nada?

Sigue a Oficina Trece en redes sociales para mantenerte al día de todo lo que me traigo entre manos.

Ir al contenido