email telefono contacto

Cómo usar Google Fonts en tu web: a mano y con plugins

¿Quieres aprender qué es Google Fonts y cómo usar estas tipografías en tus diseños? Pues empecemos por el principio. Es posible que no lo sepas pero hasta hace relativamente poco tiempo, si al diseñar una web querías asegurarte de que el usuario visualizara la fuente escogida de forma correcta, tenías un abanico de posibilidades reducido para elegir.

¿El motivo? Que el conjunto de fuentes instaladas de forma predeterminada en los ordenadores era limitado, por lo que una web que se saliera de esas opciones no iba a mostrar su fuente correctamente (imagina el cambio de apariencia que esto puede suponer en el diseño). Como resultado, este problema cortaba bastante las alas de los diseñadores y creaba un Internet demasiado estandarizado.

Times New Roman, Arial, Courier New… son fuentes ya muy vistas con las que muchos proyectos no se identifican.

¿Cuándo llegó la solución? Pues cuando aparecieron las web fonts. Las web fonts son tipografías que se almacenan en un servidor y no en el ordenador del usuario. Así, cuando entras a una web que usa web fonts, el tipo de letra se descarga al igual que las imágenes y el resto de archivos del sitio.

Las web fonts abrieron un mundo de posibilidades y permitieron por primera vez que los diseñadores eligieran entre muchísimas opciones. Hoy en día, ya podemos escoger fuente con la tranquilidad de saber que esta siempre podrá mostrarse y, por lo tanto, la apariencia de la web no variará de un soporte a otro.

Y dicho esto, ya podemos entrar en materia.

Cómo usar Google Fonts en tu web: a mano y con plugins 1
¡Suscríbete al boletín!

No te enviaremos spam, lo prometemos. Enviamos a nuestros suscriptores contenido sobre WordPress, hosting, marketing digital y programación.

+ Información básica sobre protección de datos

Qué es Google Fonts

Google Fonts es un servicio gratuito de Google que ofrece un repositorio o catálogo de fuentes para que puedas personalizar las tipografías de tu web. Lo lanzó en 2010 el equipo de Google Design y, desde entonces, ha conseguido generalizar el uso de web fonts en Internet.

En Google Fonts encontrarás fuentes libres de derechos y compatibles con todos los dispositivos, dimensiones de pantalla y lenguajes de programación. En el directorio hay, en el momento de redacción de este post, 987 familias distintas de tipografías. Todas las fuentes de código abierto de Google Fonts están disponibles para ser utilizadas en todo tipo de sitios web, tanto personales como comerciales.

Las fuentes que sirve la API de Google Fonts están comprimidas para que se descarguen al dispositivo lo más rápido posible. Una vez disponibles en el navegador del visitante, las Google Fonts se quedarán almacenadas en la cache por si vuelven a ser necesarias más adelante. Así, cuanto más uso reciba la API de Google Fonts, más común resultará que un visitante ya tenga una fuente guardada en la memoria del navegador y no necesite descargársela.

Ventajas de Google Fonts

El uso de Google Fonts implica dos ventajas fundamentales:

  1. Puedes mejorar el aspecto de tu web de forma gratuita: Google Fonts te da acceso a cientos de fuentes tipográficas distintas (la mayoría de ellas) de calidad profesional. Hace solo unos años, habrías tenido que pagar un dineral para acceder a un recurso así.
  2. Ganarás coherencia en todas las plataformas: En el momento de redactar este post, la API de Google Fonts es compatible con Google Chrome en su versión 4.249.1 o superior, Mozilla Firefox en su versión 3.5 o superior, Safari en su versión 3.1 o superior, Opera en su versión 10.5 o superior e Internet Explorer en su versión 6 o superior.

Inconvenientes de Google Fonts

Como te explicaba más arriba, el uso de webfonts implica que las visitas que lleguen por primera vez provocarán una llamada a un servidor externo para poder cargar el texto. Por eso no conviene utilizar un número excesivo de fuentes y estilos en una misma página: no te compliques o la velocidad de tu web podría resentirse. Yo creo que, para cada fuente, con 3 estilos debería bastarte: uno normal, una cursiva y una negrita (y la cursiva se ve cada vez menos).

Una forma de evitar esa consulta externa y potencialmente reducir problemas con la velocidad de carga es no servir las fuentes desde el servidor externo de Google, sino desde tu propio hosting. Puedes alojar las fuentes en el mismo servidor en el que alojas tu web y servirlas a través de tu CDN. De este modo, tendrás más control para optimizar las peticiones realizadas (por ejemplo, combinando todas las fuentes en un archivo único y, por lo tanto, una sola petición), sobre el cacheado y sobre la compresión.

Cómo funciona el catálogo de Google Fonts

Ahora que ya te he explicado un poco qué es Google Fonts, te cuento cómo funciona el catálogo.

Catálogo de Google Fonts

Como ves en la imagen anterior, para ayudarte a elegir una fuente Google pone a tu disposición un desplegable con 5 categorías principales:

  • Serif: Fuentes que incluyen serifas o remates al final de cada letra. Garamond o Times New Roman son dos ejemplos muy conocidos.
  • Sans serif: Tipografías sin remates, como Helvetica o Arial.
  • Display: Al ser más ornamentales, son fuentes pensadas sobre todo para títulos o textos cortos (y no para párrafos). Su excentricidad les otorga personalidad, pero no resultan tan legibles. Buenos ejemplos son Lobster o Monoton.
  • Handwriting: Son fuentes diseñadas para imitar la letra manuscrita. Hay que elegir con cuidado porque no siempre escalan bien y eso puede afectar a su legibilidad. Como te imaginarás, tampoco sirven para grandes cuerpos de texto. Seguramente te suenen ejemplos como Comic Neue o Pacifico.
  • Monospace: Las fuentes monoespaciadas son aquellas en las que todas y cada una de las letras ocupan exactamente el mismo espacio. Uno de los ejemplos más conocidos es Courier.

El desplegable “Language” también te permite escoger el alfabeto en el que vas a escribir (por defecto, se muestra el alfabeto latino). En “Font Properties” tienes otros aspectos importantes, como el número de estilos que quieres que tenga tu fuente, su grosor, su inclinación o su anchura.

Además el catálogo está, por defecto, ordenado en función de la popularidad de las fuentes en el momento concreto en el que el usuario accede. Sin embargo, también podemos ordenarlas por orden alfabético, por histórico de popularidad (para encontrar las fuentes que más éxito han tenido a lo largo del tiempo) o por fecha de publicación en el catálogo.

Cómo ordenar fuentes google fonts

¿Que quieres probar cómo queda una frase concreta escrita con una fuente de Google Fonts? Puedes introducir la frase que quieras, ver todo el alfabeto, los números o ver un párrafo completo en el tamaño que tú prefieras. Solo tienes que pulsar en el desplegable de la siguiente captura y elegir la opción que prefieras:

Cómo probar el catálogo de Google Fonts

Otra gran opción para probar cómo quedaría tu web (o la de cualquiera) con una Google Font que te gusta es la extensión Google Font Previewer for Chrome. Solo tienes que instalarla en el navegador desde el enlace anterior, pulsar en el icono correspondiente y elegir la fuente que quieres probar en la web que tienes abierta. No funcionará perfectamente, pero te ayudará a hacerte una idea.

Ejemplo de Google Font Previewer

Cuando ya hayas decidido qué Google Font vas a usar, tan solo tienes que copiar la línea de código que te proporciona Google para ella. En la siguiente sección te lo explico con un ejemplo.

Cómo añadir Google Fonts a tu web manualmente

¿Ya has elegido una fuente del catálogo de Google Font y ahora te preguntas cómo utilizarla en tu web? Pues te lo explico rápidamente, porque es muy fácil. Con capturas lo verás mejor.

He elegido una fuente que se llama Merienda y he hecho clic en el recuadro “Family Selected” que aparece en la parte inferior derecha de mi pantalla.

Pestaña Family Selected de Google Fonts

Ahora, en la pestaña “Embed” puedo ver dos códigos. El que debo utilizar en mi web es el primer enlace, el código que aparece en el recuadro gris superior.

Cómo añadir fuentes de Google Fonts

Si tengo una web a medida…

Es muy sencillo:

  1. Abro el archivo index.html o aquel donde se encuentre el código de la cabecera de mi web.
  2. Busco la etiqueta <head> y añado el enlace que te decía, el del recuadro gris superior de la imagen anterior. Ojo: El enlace tiene que ir entre la etiqueta <head>, que señala el inicio de la cabecera de mi web, y la etiqueta de cierre </head>, que marca el final de la cabecera.
  3. Al final, mi index.html será algo así:
<!DOCTYPE html>
<html>
<head>
  <title>Mi web de ejemplo para el post sobre Google Fonts</title>
  <link href="https://fonts.googleapis.com/css?family=Merienda&display=swap" rel="stylesheet">
</head>
<body>
<h1>Mi primer título de ejemplo</h1>
<p>Esto de aquí es un párrafo.</p>
<p>Esto de aquí es otro párrafo.</p>
</body>
</html>

Si voy a usar Google Fonts en WordPress…

Hay varias formas de añadir Google Fonts a WordPress pero no es necesario utilizar un plugin para ello. Si tienes unos conocimientos mínimos sobre programación web, te recomiendo que lo hagas de la siguiente manera:

  1. Entro en mi panel de control, me voy a la carpeta de mi theme activo y abro el archivo functions.php.
  2. Pego el siguiente código en el functions.php dentro de las etiquetas especiales <?php y ?> :
function insertar_fuentes_google() {
   wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Merienda&display=swap', false );
   }   
   add_action( 'wp_enqueue_scripts', 'insertar_fuentes_google' );

Atención: Recuerda sustituir el enlace de mi fuente (https://fonts.googleapis.com/css?family=Merienda&display=swap) por el enlace de la fuente que hayas elegido tú.

Estos cambios es siempre recomendable hacerlos en un child theme, ya que si se hacen sobre el parent theme, cuando este se actualice los cambios se perderán. Si no lo tienes claro, ahora es buen momento de aprender qué es un child theme y cómo crear el de tu plantilla fácilmente.

Si todo esto te ha parecido muy complicado y prefieres no tocar el HTML de tu WordPress directamente, más abajo te explico cómo usar Google Fonts a través de distintos plugins.

Especificar fuentes en CSS

Ahora que he añadido manualmente la llamada a mi fuente de Google Fonts, ya puedo especificar la fuente en mi código CSS e indicar así cómo quiero emplear cada estilo. Lo haré desde el archivo style.css de mi plantilla utilizando el código del cuadro gris inferior de la imagen anterior. Por ejemplo, en mi web quiero usar la fuente Merienda solamente en los títulos, de modo que especificaré lo siguiente en mi style.css:

h1,
h2,
h3 {
   font-family: 'Playfair Display', serif;
}

3 mejores plugins de Google Fonts para WordPress

Hoy en día ya son muchas las plantillas que incluyen la opción de utilizar Google Fonts desde el propio editor del theme. Algunos pagebuilders, como Elementor, tienen Google Fonts incorporado para que ya no te haga falta instalar nada. No obstante, a veces la forma en que está desarrollada la plantilla puede no estar demasiado optimizada, de forma que es posible que te convenga deshabilitar las Google Fonts en el theme y añadirlas tú mismo.

A continuación, te dejo 3 plugins que te pueden ayudar, tanto si tu plantilla no te da facilidades para usar Google Fonts como si no te fías mucho de su método:

WP Google Fonts

WP Google Fonts

De los que he probado, WP Google Fonts es mi plugin favorito para subir Google Fonts a WordPress. Se instala, se activa y ya está listo para añadir fuentes y asignarlas a los elementos que queramos (títulos, párrafos de texto, listas, etc.). Hay un límite máximo de 6 fuentes, pero es que si necesitas más estás montando un batiburrillo tremendo en tu web.

WP Google Fonts no podría ser más sencillo de usar y es perfecto para Google Fonts y solo para Google Fonts: no te permite subir ningún otro tipo de fuente.

Use Any Font

Use any font

No me gusta tanto como WP Google Fonts porque me parece una interfaz un poco más feúcha, pero Use Any Font funciona bien y es otra buena opción para añadir fuentes a WordPress. Lo malo es que la versión 100% gratuita solamente permite la conversión de una única fuente. Lo bueno es que, con una aportación de 10 dólares, podrás disfrutar de uso sin límites durante todo el tiempo que quieras.

Es un plugin fácil de usar e incluye instrucciones detalladas (que realmente no son muy necesarias, porque es autoexplicativo). Después de activarlo mediante API (hay un enlace en la página de activación para hacerte con una clave Lite o Test, la gratuita), solo tendrás que subir las fuentes que quieras en cualquiera de los formatos soportados (.ttf, .otf o .woff) y ya podrás asignarlas a títulos, párrafos o citas, por ejemplo.

Si no quieres ceñirte solamente a las fuentes de Google Fonts, Use Any Font te permite más libertad para añadir otros tipos de fuentes personalizadas.

Easy Google Fonts

Easy Google Fonts

Mucha gente se pregunta al principio cómo usar Easy Google Fonts porque es un poco más confuso que los anteriores. Es simplemente un poco distinto, porque Easy Google Fonts se usa desde el editor, en lugar de activarse a las bravas y listo. ¿Por qué? Pues porque así tienes disponible la vista previa y puedes comprobar el resultado que dan tus nuevas fuentes antes de publicar. ¡Muy útil, la verdad!

Desde el editor podrás especificar fuente, estilo, color, tamaño, margen, etc. para cada elemento. Las opciones de personalización del editor son muy numerosas aunque, eso sí, solamente podrás trabajar con Google Fonts y no podrás subir otras fuentes personalizadas.

Cómo descargar fuentes de Google Fonts

Y si lo que quieres es tener las tipografías almacenadas en tu ordenador para usar no solo en una web sino en documentos de distintos tipos, mock-ups, etc., puedes descargarte las fuentes de Google Fonts de forma igualmente sencilla. Solo tienes que seleccionar las fuentes que te interesan y hacer clic en el enlace “Download family” que aparece en la esquina superior derecha de esta captura:

Cómo descargar Google Fonts

Esto es también lo que deberás hacer si, como te comentaba más arriba, quieres alojar las fuentes de Google Fonts en tu propio hosting para no tener que hacer peticiones a los servidores de Google.

¿Y cuáles son las mejores tipografías de Google Fonts?

Con toda la variedad que hay, a veces puede costar tomar una decisión. Si somos objetivos y nos vamos a los datos de uso puros y duros, hay tipos de letra que son claros ganadores. Por ejemplo, vamos a ver el informe de visitas del último año (a fecha de redacción de este artículo):

Google Fonts Analytics

Como ves, fuentes como Roboto, Open Sans y Lato son las más populares en 2019-2020.

Si quieres ver las fuentes más vistas actualizadas para la fecha en que estás leyendo el artículo, las tienes aquí: https://fonts.google.com/analytics Es posible que hayan cambiado con el tiempo, pero si te decides por cualquiera de las primeras 10 fuentes de la lista, será raro que falles.

¿Y qué pasa si no quieres ceñirte a los tipos de letra más conocidos? A lo mejor te apetece algo más original, pero no quieres arriesgarte con una fuente desconocida. En ese caso, hay algunas Google Fonts que ganan adeptos rápidamente pero todavía no han llegado a lo alto de la lista. ¡Puedes probar con alguna de ellas!

  • Noto Sans o Noto Serif: Noto es una fuente diseñada por el propio Google que soporta más de 30 scripts y tenemos disponibles familias con y sin serifa. Las fuentes Noto están pensadas para resultar visualmente claras, elegantes y sencillas. La verdad es que el resultado es muy limpio.
  • Playfair Display: Una fuente serif obra de Claus Eggers Sørensen para títulos y subtítulos, queda muy bien cuando se acompaña de Georgia para los cuerpos de texto.
  • Poppins: Creada por Indian Type Foundry, esta fuente sans-serif está siendo utilizada tanto para títulos como para textos más largos. Es muy cómoda también en móvil, por lo que he visto.
  • Vollkorn: Me encanta esta fuente serif diseñada por Friedrich Althausen. Es discreta pero funciona genial tanto en web como impresa, en párrafos y en títulos.
  • Muli: Fuente sans-serif obra de Vernon Adams. Es muy versátil y yo creo que queda perfecta tanto en títulos como en cuerpos de texto, porque tiene espaciado suficiente entre sus letras.
  • Nunito: Una fuente sans-serif también creada por Vernon Adams. Es perfecta para display, es decir, para títulos elegantes y modernos.
  • Fira Sans: Fuente diseñada por Erik Spiekermann y Ralph Du Carrois para Mozilla. Me encanta en absolutamente todos los usos que le he visto. Simplemente, queda genial en web y en cualquier tamaño.
  • Quicksand: Obra de Andrew Paglinawan, es una fuente sans-serif pensada para display. Aunque teóricamente también debería funcionar con tamaños más pequeños, para mi gusto pierde demasiada legibilidad.
  • Work Sans: Una fuente sans-serif diseñada por Wei Huang. Los estilos del centro de la familia (Regular y Medium) están pensados para párrafos e impresiones, mientras que las opciones más extremas han sido diseñadas para display.

Comprobaciones básicas al elegir una fuente

Elijas la fuente que elijas, lo importante es que la pruebes correctamente y valores los resultados con cuidado. Te doy unos consejos generales:

  • ¿Has elegido una fuente que pega con tu marca? No olvides tus valores corporativos y escoge una fuente que armonice con ellos.
  • Haz tests con distintos dispositivos y resoluciones para ver el comportamiento de la fuente en cada caso.
  • ¿Vas a necesitar materiales impresos? Revisa también si la fuente escogida te sirve para ese tipo de comunicaciones.
  • Prueba la fuente con diferentes cuerpos de texto: párrafos, títulos, subtítulos… La fuente tendrá que tener estilos suficientes, resultar legible en cada caso y tener una buena relación de contraste.
  • Asegúrate de que incluye todos los caracteres que vas a necesitar (no vaya a ser que después te falten la “ñ” o las tildes, por ejemplo).
  • Escoge un número de fuentes y estilos limitado: lo más común es escoger una fuente principal y una secundaria que armonicen entre sí.

Lo siguiente: Las fuentes variables

Las fuentes variables salieron a la luz oficialmente con el nombre de OpenType Font Variations (archivos .otf) hace tan solo unos años, en 2016, pero desde el inicio plantearon toda una revolución tipográfica. Y no es de extrañar, ya que los impulsores del proyecto fueron los 4 gigantes de internet por antonomasia: Google, Apple, Microsoft y Adobe.

Una fuente variable es, en pocas palabras, un único archivo de fuente que funciona como si fueran varias, ya que es flexible en cuanto a grosor, ancho, inclinación o cualquier otro atributo que el tipógrafo quiera diseñar (y sin que ello aumente el peso del archivo). De este modo, podemos decir que con una sola fuente variable se pueden conseguir un número ingente de estilos sin que ello afecte al tiempo de carga de la web, ya que en realidad tan solo existirá un único archivo OpenType.

Imagina lo que esto supone para el diseño responsive. Son fuentes cuyo tamaño puede reducirse o ampliarse, condensarse o estrecharse, para conseguir una mejor legibilidad en función del dispositivo que se esté utilizando para visualizar la web. Todo ello de forma automática.

Sin embargo, para que las fuentes variables pasen a ser la norma todavía queda trabajo por hacer. Ya existen algunas fuentes disponibles, pero falta mucha variedad que tendrán que ir añadiendo los diseñadores. Además, el software y los navegadores también van a tener que ponerse al día (aunque algunos ya lo han hecho).

¿Quieres experimentar con fuentes variables? Visita TypeDetailAxis-PraxisV-fonts y juega con sus interfaces o incluso descárgatelas para probarlas.

Anímate: ¿vas a usar Google Fonts?

Cuando diseñas un sitio web, quedarte con las tipografías predeterminadas puede parecer lo más sencillo. Sin embargo, yo creo que elegir la fuente correcta puede tener un impacto muy positivo sobre el éxito de tu web. Desde el logo hasta los números, una buena tipografía establece una suerte de comunicación no verbal con tus visitas, influyendo así en la percepción que tienen de tu proyecto.

En consecuencia, a mí me parece que Google Fonts es un recurso de valor incalculable para un diseñador web, sobre todo si tenemos en cuenta lo intuitivo y cómodo que resulta utilizar el catálogo. Google Fonts te ofrece fuentes legibles y accesibles, de uso comercial y personal, y con estéticas de lo más variadas para encajar en todo tipo de proyectos.

Lo dicho: si al final te animas y te pasas a Google Fonts, deja un comentario y dime qué te parece el resultado.

Andrea Barreiro
Andrea Barreiro

Técnico de marketing online en el sector del hosting desde 2012. Invierte el tiempo en leer mucho, subir montes e intentar que Bowie no se coma el sofá.

Artículos relacionados

Si te ha gustado este post, aquí tienes otros que pueden ser de tu interés. ¡No dejes de aprender!

Tenemos 0 comentarios en "Cómo usar Google Fonts en tu web: a mano y con plugins"
Deja una respuesta

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

¿Vienes de otro proveedor?

¡Ningún problema! Te migramos gratis y sin cortes
cohete raiola