curso de Wordpress completo

Cómo instalar Google Fonts en WordPress

Instalar Google Fonts en WordPress es una buena forma de mejorar el diseño de tu web y hacer el contenido más legible. En este tutorial te decimos cómo.

¿Qué es Google Fonts?

Google Fonts es un servicio de Google que, desde el año 2010, se encarga de facilitar el acceso a un buen número de tipografías web (más de ochocientas tipografías) de forma gratuita.

 ¿Qué es eso de las tipografías web?

La tipografía de una web se refiere a:

  • Las letras (a, b, c, d, e…)
  • Los números (1, 2, 3, 4, 5, 6, 7, 8, 9, 0)
  • Y los caracteres especiales (@, #, €, &, =, ¿, *…)

Que forman parte del contenido en forma de texto de una página. Estos elementos cuando pertenecen a una misma familia, o a un mismo tipo de fuente, tienen estrecha relación y correspondencia estética.

En un principio la tipografía dependía exclusivamente del navegador (web browser). De forma tal que los diseñadores y webmasters no podían influir en la elección de la tipografía.

Por eso la mayoría de los textos de las páginas webs se mostraba en:

  • Times New Roman
  • Arial
  • Georgia
  • Garamond.

Y algunos internautas con buena memoria incluso recordaran textos de cierta webs en Comic Sans (sí, el némesis de los diseñadores).

De forma tal que en aquellos años las opciones eran limitadas.

Porque para que una fuente o tipografía fuera desplegada en el navegador debía estar instalada en el ordenador.

Aparece el CSS2

Con la llegada del CSS2 se abrió el abanico de opciones. El CSS2 permitía a los navegadores webs descargar las tipografías al navegador. Eliminando así el prerrequisito de:

Una fuente o tipografía es desplegada en el navegador solo cuando ya está instalada en el ordenador.

Por qué instalar Google Fonts en WordPress

En algunos casos la apariencia general de una web depende en gran medida de la tipografía.

Por increíble que parezca. Más allá de los otros elementos del diseño que resultan importantes. En ciertos casos puntuales, como en aquellas webs donde el grueso del contenido se consume vía texto, la tipografía puede obrar auténticos milagros.

De forma tal que con Google Fonts nos podemos acercar mucho a ese diseño que tenemos en nuestra cabeza. Y que pese a dar mil vueltas con el page builder, a la fecha aún no hemos podido acercarnos.

Una fuente adecuada también puede mejorar la legibilidad de nuestros textos. Esto aumenta la retención y mejoran nuestros números de cara a Google y al SEO.

Cómo instalar Google Fonts en WordPressgoogle fonts logo

Para instalar Google Fonts o una fuente alojada en este servicio existen varios métodos.

Pero antes de instalar una tipografía web vía Google Fonts conviene que elijas una fuente que haga brillar tus textos. Es decir, una fuente que sea atractiva y fácil de leer.

Una vez elegida la tipografía nos ponemos manos a la obra.

1.     Instalando Google Fonts sin plugins ni herramientas

Una vez elegida nuestra tipografía en Google Fonts, copiamos el código web de esa tipografía.

Nosotros trabajaremos con Raleway. Y este es su código:

<link href=’http://fonts.googleapis.com/css?family=Raleway’ rel=’stylesheet’ type=’text/css’>

Entonces en nuestro escritorio de WordPress seguimos la siguiente ruta:

Apariencia > Editor > Header*

*El nombre de nuestro header o cabecera en el editor puede variar de acuerdo al tema.

Advertencia:

Recuerda que modificar el código de nuestra instalación de WordPress puede resultar perjudicial. Antes de modificar algo recuerda crear un respaldo.

Entonces copiamos el código de la fuente de Google Fonts y lo pegamos entre las etiquetas: <head>  y </head>

<head> Aquí pegas código de la fuente de Google Fonts </head>

Guardas los cambios y casi listo.

Ahora solo necesitas invocar la fuente que acabas de instalar.

Para ello sigue la siguiente ruta:

Apariencia > Personalizar > CSS adicional

Pegas el siguiente código:

html * { font-family:’Raleway’ !important; }

Recuerda que el nombre de la font family variará en función de tipo de fuente que estés instalando.

Guardas los cambios y listo.

Ya tenemos instalada una nueva tipografía vía Google Fonts.

2.     Instalando Google Fonts con ayuda de plugins

La forma más sencilla de instalar fuentes de Google Fonts en WordPress (y en algunos casos la más recomendable), es usando plugins.

En este apartado las opciones son variadas pues existen infinidad de plugins que se encargan de importar las fuentes desde Google Fonts a tu web WordPress.Easy Google Fonts

Uno de los más usados es Easy Google Fonts.

Aunque los otros plugins utilizan el mismo principio.

  1. Instalas el plugin
  2. Sigues la siguiente ruta: Apariencia > Personalizar
  3. Aparecerá una opción de tipografía
  4. Seleccionas la fuente según gustes.
  5. Guardas los cambios y listo.

Ahora tienes fuentes personalizadas vía Google Fonts en tu web WordPress.

¿Te ha gustado el tutorial?

¿Quieres seguir aprendiendo sobre WordPress?

Pues estás de enhorabuena.

Si quieres ser un experto en desarrollo web  y todo lo referente al mundo del WordPress apúntate al mejor curso en línea y en español del mejor gestor de contenidos: WordPress.org