Una de las preguntas que me hacen más a menudo en mi trabajo como diseñadora es, ¿cómo puedo cambiar la tipografía de mi web? En principio puede parecer algo complicado pero lo cierto es que instalar una tipografía en WordPress es bastante sencillo.
La mayoría de las plantillas vienen con Google Fonts integrado y te permiten elegir entre una serie de tipografías ya seleccionadas. Pero, ¿qué pasa si quieres utilizar una fuente que no está en ese listado? Lo primero que tienes que hacer es adquirir la fuente que quieres instalar.
Las tipografías como todos los elementos de diseño tienen derechos de uso y copyright. Muchas son gratuitas y podrás descargar los archivos para su instalación en un par de clics sin ningún problema. Sin embargo, también las hay de pago, por lo que antes de instalarla debes asegurarte de tener la licencia necesaria para su uso.
Una vez tengas el archivo de la tipografía que quieres instalar en tu ordenador puedes empezar el proceso. Tienes varias opciones, vamos a verlas 😉
Instalar una tipografía en WordPress con un plugin
La principal ventaja de utilizar un plugin es que no necesitas saber nada de código. Además, los cambios que hagas no irán vinculados a la plantilla que tengas instalada por lo que la podrás actualizar o cambiar sin preocuparte.
Hay un gran repertorio de plugins que permiten instalar tipografías personalizadas pero yo te voy a hablar de dos en concreto:
Use any font
Con este plugin podrás subir cualquier tipografía desde tu ordenador y asignarla a los textos que quieras de tu web. Su configuración es muy sencilla, vamos a verla paso por paso:
- Cuando instales el plugin, te pedirá una API Key para poder utilizarlo. Tan solo tienes que rellenar tus datos para obtener la clave que necesitas, no te llevarás más de un minuto.
- Después verás una nueva pantalla donde tendrás que asignar un nombre a la fuente que vas a subir y que seleccionar el archivo en tu ordenador.
- Una vez la hayas subido tan solo te falta a los textos que quieras. Puedes marcar la opción de «asignar a todos los textos de la web» o elegir algún tipo concreto como pueden ser los títulos.
¿A qué ha sido fácil? La única pega que tiene este plugin es que la versión gratuita tan solo te deja subir una tipografía si quieres añadir más tendrás que obtener la versión de pago.
Easy Google Fonts
Como te comentaba al principio la mayoría de las plantillas vienen con Google Fonts integrado pero puede que ese no sea tu caso. Entonces lo más sencillo es que utilices este plugin que te permitirá elegir entre un listado de más de 600 tipografías.
La principal diferencia con el plugin anterior, es que en este caso no tienes que adquirir y subir la fuente que quieres utilizar. Tan solo tienes que buscar una tipografía que te guste en el extenso repertorio que ofrece y listo 😉
Instalar una tipografía en WordPress con @font-face
Este método requiere añadir un trocito de código a tu plantilla pero no hacer falta ser un programador avanzado para utilizarlo. En realidad es un proceso muy simple.
- Lo primero que debes hacer es subir el archivo de la fuente que quieras utilizar a tu web. Para ello lo más fácil es que utilices el gestor de archivos de tu servidor, lo encontrarás fácilmente en el panel de control. Una vez dentro, selecciona una ubicación para la tipografía que vas a utilizar y listo. Mi recomendación es que crees una carpeta llamada «fonts» dentro de la carpeta del tema, así la tendrás bien localizada.
- Después tienes que entrar en WordPress y buscar el editor de CSS personalizado, según la plantilla que uses estará en un sitio u otro. Por ejemplo, en Genesis Framework lo tienes en: Apariencia / Personalizar /CSS Adicional. Es importante que lo hagas así, no se te ocurra modificar el archivo original ya que perderás los cambios en la primera actualización.
- Por último tienes que pegar el siguiente código en el espacio que te aparece:
@font-face {
font-family: Chronicle Display;
src: url(‘/wp-content/themes/glopdesign/fonts/chronicle-display.otf’);
font-weight: normal;
}
*IMPORTANTE: recuerda que debes modificar el nombre de la tipografía y la ubicación para que funcione. El ejemplo muestra una carpeta llamada «fonts» dentro de la plantilla «glopdesign». Debes sustituir todo lo que va entre comillas por lo que corresponda a tu web para que te cargue la tipografía correctamente.
Si después de hacer todos estos pasos la web no te carga la tipografía correctamente, es muy posible que necesites limpiar las cookies del ordenador. La mayoría de los servidores ofrecen un servicio de caché integrado y esto hace que muchos cambios de código no se vean al momento.
Espero que el artículo de esta semana te sirva para instalar una tipografía en WordPress y que así consigas mejorar la imagen de tu web. Si tienes cualquier duda sobre el proceso o te apetece aportar algún dato extra puedes dejar un comentario más abajo. Estaré encantada de leerte 😉
