Fuentes tipográficas en WordPress

A todos nos preocupa que nuestra web sea bonita y muestre personalidad. Nos esforzamos por conseguir que sea accesible y se diferencie del resto. Pero hay un elemento que, pese a estar a la vista, solemos descuidar. Hoy te hablo de las fuentes tipográficas en WordPress.

Como te indicaba en la introducción, debemos esforzarnos por hacer de nuestra web un espacio accesible, atractivo y dentro de lo posible distinto del resto. De entre todos los recursos que utilizamos para mostrarnos al mundo posiblemente la fuente sea el más versátil y el más capaz de conseguir todo lo anterior.

Accesibilidad

No conviene elegir la fuente a la ligera. Debe ser una fuente cómoda de leer porque quieres que el usuario se sienta cómodo y pase mucho tiempo en tu web. Debes cuidar el espaciado entre los caracteres y entre líneas. También debes elegir un color que contraste con el fondo y un tamaño de fuente no demasiado pequeño para que todo el mundo pueda leerlo.

Personalidad

Las fuentes tipográficas junto con el color que elijas serán como los textiles para tu web. Son los encargados de crear un entorno acogedor y con personalidad. La fuente hará que tu web sea distinta al instante, aunque no cambies el tema.

Elegir fuentes

Un recurso muy famoso es utilizar Google Fonts. Hay montones de fuentes para elegir, para todos los gustos y ocasiones, y son gratuitas.

Pero no te vuelvas loc@. No conviene tampoco elegir más de dos fuentes distintas o tu web se convertirá en un batiburrillo y perderá cohesión y personalidad, que es justo lo que pretendemos.

Cómo colocarlas en la web

Es habitual el empleo de Google Fonts cargadas directamente desde los servidores de Google, colocando el enlace en la cabecera  de los archivos html de la web. Muchos lo hacen por ahorrar espacio en el servidor. Sin embargo hay razones para no hacerlo y alojar esas fuentes en local.

• El mismo PageSpeed Insights te muestra errores de java debido a un recurso que está retrasando la carga de la página. Ese recurso, numerosas veces es la fuente que está cargando desde la API de Google.
• También podría ser que Google retirara la fuente que estás usando, lo cual tendría efectos devastadores para tu web. Las fuentes influyen muchísimo en el maquetado de la web por lo que al cambiar de fuente todas las páginas se verán afectadas, los elementos ya no encajarán según lo planeaste.
• Si aún no te he convencido hay una última razón de peso, de tipo legal. El RGPD no ve con buenos ojos que se traten datos de los usuarios por motivos estéticos. La API de Google rastrea a los usuarios que visitan tu página.

Cómo almacenar las fuentes en local

Estos son mis pasos

1. Puedes entrar en Google Fonts para elegir la fuente que más te guste.
2. Después ve a la página “Google webfonts helper” e introduce su nombre en el buscador.
3. Una vez te muestre la fuente que te interesa selecciona las variaciones que necesites.
4. Después descarga la fuente y copia el código que aparece.
5. Ese código es el que tendrás que colocar en el archivo CSS del child theme de tu web.
6. También tendrás que crear una carpeta “fonts” en el child theme que estés utilizando para colocar las fuentes.

Es posible que esto no baste, quizá tu web siga conectándose con los servidores de Google. Esto es debido a que habrá plugins en tu web que carguen las fuentes de Google sin que tú lo sepas. Para evitar esto, instala el plugin “Disable and Remove Google Fonts” que encontrarás en el repositorio oficial.

Espero haberte ayudado. Si quieres recibir el año con una nueva web échale un ojito a Unifiloweb que, por cierto almacena las fuentes en local para evitarte problemas. 🙂