Cómo cambiar el tipo de letra en WordPress a una tipografía personalizada con Elementor y Generatepress

Ya sabes que la tipografía es uno de los elementos clave del diseño web. Por ello, cambiar el tipo de letra en WordPress para que refleje tanto tu personalidad (o la de tu negocio) como lo que quieres transmitir es esencial para que tu mensaje calé muy hondo en tus potenciales clientes.

Además, dicho sea de paso, modificar la tipografía de tu web por alguna más personalizada provocará irremediablamente que tu diseño web WordPress consiga diferenciarse más respecto a las plataformas digitales de tu competencia.

Por todo esto, hoy quiero enseñarte en este artículo cómo cambiar el tipo de letra de tu WordPress con Generatepress y Elementor de manera fácil y sencilla.

De hecho, lo vamos a hacer de tal forma que, una vez implementada esta tipografía personalizada, puedas utilizarla tanto en las opciones de Generatepress como en las de Elementor, de tal modo que puedas hacer uso de ellas desde estas herramientas como si de una tipografía más por defecto se tratase.

Cambiar el tipo de letra en WordPress a una tipografía personalizada en Elementor

Para implementar una tipografía web personalizada en Elementor de tal modo que aparezca entre las tipografías a elegir en la pestaña Estilo de cualquiera de sus herramientas, hay que proceder de la siguiente manera…

Lo primero de todo es subir la tipografía en los diferentes formatos de letra aceptados por los distintos navegadores más populares que existen en la actualidad. Estos formatos son:

1. Formato WOFF.
2. Formato WOFF2.
3. Formato TTF.
4. Formato EOT.

Si tu tipografía contiene iconos, es recomendable también que dispongas del formato SVG de la misma.

Es posible que si adquieres o descargas una tipografía personalizada, esta únicamente puedas conseguirla en uno de estos formatos.

No te preocupes. Esto no es un problema ni de lejos. Para convertir tu tipografía a los formatos que necesites, vamos a utilizar un conversor online gratuito llamado Everything Fonts.

Cuando entres en esta página, si te pones sobre la pestaña Font Conversion verás que puedes transformar tu tipografía a cualquiera de los formatos anteriormente mencionados partiendo del que hayas descargado.

Es decir, si por ejemplo tu tienes la tipografía descargada en formato TTF, tendrás que utilizar las opciones ttf conversions para poder pasar la letra que quieres utilizar en tu web a los otros formatos WOFF, WOFF2 y TTF.

Pasar de un formato a otro es tan sencillo como elegir en este menú el formato que quieres obtener. Una vez en la pantalla correspondiente, simplemente tienes que pulsar en el botón Pick font file para seleccionar en tu PC la tipografía descargada previamente.

Cuando hayas hecho esto, marca la opción The EULAs of the font allow this conversion para que esté en verde (YES) y posteriormente pulsa en Convert. Automáticamente podrás descargar tu tipografía convertida al formato que deseas.

Ahora que ya tienes tu tipografía en los diferentes formatos aceptados por los navegadores principales y más usados de la actualidad, es hora de que te dirijas en tu panel de administración de WordPress hasta la opción Elementor > Custom Fonts.

Pulsa el botón Add New para agregar una nueva tipografía personalizada. Inmediatamente después, podrás introducir el nombre de la misma que quieres que aparezca en Elementor para identificarla. Pulsando el botón Add font variation podrás subir los formatos convertidos anteriormente pulsando en cada uno de ellos el botón de cargar la fuente (Upload).

Todos los formatos de letra se guardarán en tu biblioteca de medios de WordPress. Cada uno tendrá una URL asignada en esta biblioteca de medios que te aconsejo que tengas apuntada o localizada, ya que luego estas URL’s serán importantes a la hora de cargar nuestra tipografía en las opciones de Generatepress.

IMPORTANTE: Recuerda que si tu tipografía tienes diferentes variaciones (negrita, cursiva, etc.) tendrás que convertir e implementar una nueva variante para esa misma tipografía personalizada creada siguiendo el mismo procedimiento anteriormente explicado.

Cuando hayas terminado de cargar los diferentes formatos de tu tipografía, sólo tienes que pulsar en el botón Publicar. Con esto…¡ya has conseguido cambiar el tipo de letra de tu WordPress a una tipografía personalizada que puedes utilizar en Elementor!

A continuación también te dejo un vídeo de todo el proceso a seguir para cambiar el tipo de letra en WordPress a una tipografía personalizada que puedas usar en Elementor, por si algo no te ha quedado demasiado claro que lo veas cómo lo hago yo paso por paso.

Cambiar el tipo de letra a una tipografía personalizada en Generatepress

Ya tienes la tipografía que deseabas implementada y lista para usarse en Elementor. Sin embargo, esta tipografía aún no aparecerá entre los tipos de letra a elegir en las opciones de tipografía de Generatepress. Puedes comprobarlo en Apariencia > Personalizar > Tipografía.

Vamos a ponerle solución a esto para que puedas usar este tipo de letra independientemente de que utilices más las opciones de tipografía de Elementor o las de Generatepress. Es lo ideal, ¿no crees?

Parto de la base de que ya has convertido tus fuentes con la herramienta online Everything Fonts que he mencionado anteriormente y que las tienes subidas a tu WordPress.

Bien, si te diriges hacia la sección Medios de tu WordPress, verás que los diferentes formatos de tipografía que has subido están allí. Quiero que localices el formato WOFF de tu tipografía, lo selecciones y copies en un bloc de notas la URL donde se encuentra.

Con esta URL, vas a dirigirte al CSS personalizado de tu sitio web. En mi caso, yo para crear CSS personalizado utilizo el plugin Simple CSS porque está creado por el mismo desarrollador que Generatepress y me gusta su interfaz de colores más cómoda para desarrollo CSS, pero también puedes hacerlo desde Apariencia > Personalizar > CSS Adicional.

Una vez allí, vas a copiar este código:

@font-face{
font-family: NOMBRE-DE-TU-TIPOGRAFIA;
src: url(‘URL-DE-TU-TIPOGRAFIA.woff’);
font-weight: normal;
}

Naturalmente, en los apartados indicados debes poner el nombre de tu tipografía y la URL que has obtenido de tu biblioteca de medios anteriormente y has copiado al bloc de notas.

Del mismo modo, si quieres añadir establecer diferentes pesos para esta misma tipografía, tendrás que duplicar el código anteriormente escrito modificando el peso de letra por el que corresponda (negrita, cursiva, etc.).

Una vez hecho esto, dirígete a Apariencia > Editor.

En el editor de archivos, tendrás que localizar el fichero functions.php de tu tema y al final del mismo añadir el siguiente código:

add_filter( ‘generate_typography_default_fonts’,’tu_add_system_fonts’ );

function tu_add_system_fonts( $fonts ) {
$fonts[] = ‘NOMBRE-DE-TU-TIPOGRAFIA’;
return $fonts;
}

Guarda los cambios y… se hizo la magia. Ahora si vas a Apariencia > Personalizar > Tipografía podrás ver que ese nuevo tipo de letra ya aparece entre las fuentes a elegir en tu Generatepress.

Al igual que con Elementor, te dejo un vídeo tutorial explicando todo el proceso por si algo no has terminado de comprenderlo bien en formato texto. 😉

¡Ya has conseguido cambiar el tipo de letra en tu WordPress a una tipografía personalizada!

Espero que gracias a este pequeño tutorial hayas aprendido a cambiar el tipo de letra en WordPress de tal modo que la tipografía de tu web refleje las sensaciones y emociones que quieres transmitir con ella, haciendo tu sitio web un poquito más único dentro de tu sector profesional.

Como siempre, si aplicas todo lo aprendido aquí, espero que me dejes tu experiencia en los comentarios o que realices tus aportes personales en ellos si los tuvieses. Seguimos hablando en ellos. 🙂

Imagen de cabecera cedida por Shutterstock y realizada por EFKS