¡Hola #Yobers!
Hay veces que necesitamos subir una tipografía a nuestro WordPress ya sea por temas de optimización o por temas de diseño y estilo de marca. En este artículo veremos paso a paso cómo hacerlo y algunos consejos que os vendrán muy bien para sacar el máximo partido a vuestra página web.
Para este artículo hay que tener presente que estamos trabajando con Elementor Pro. El constructor visual en su versión PRO nos habilita una apartado en el que podemos subir nuestras propias tipografías llamado Custom Fonts. Si no disponemos de Elementor Pro, podemos optar por otros plugins que nos permitan la subida de fuentes como Use Any Font | Custom Font Uploader, o similar.
Prepara la fuente en WOFF2
Antes de nada, es necesario tener la tipografía en formato “.woff2”. Este es el formato que podrán leer los navegadores, por eso debes asegurarte de que tienes disponible la fuente en ese formato.
Accede a Custom Fonts
Para acceder a Custom Fonts debemos desplegar el Menú de Elementor de la barra lateral de WordPress. Ahí encontramos el apartado al que tenemos que acceder.
Crea una Nueva Tipografía
Pulsa en “Add New Font” e introduce el nombre de la tipografía que vayas a subir. En nuestro caso la tipografía que vamos a subir es la Geist, por eso escribiremos el nombre tal cual.
Selecciona el tipo de fuente que vayas a utilizar:
- Static Font para subir una a una las variaciones de tamaño de manera estática (Regular, Medium, Semibold etc.)
- Variable para subir únicamente el archivo de tipografía variable.
Para nuestro ejemplo subiremos las variaciones una a una, así que escogemos “Add Static Font”
Sube la Tipografía en WOFF2
Pulsando en Add Static Font vemos un cuadro con diferentes opciones. El proceso que debes seguir es el siguiente:
Paso 1 Selecciona el Peso:
El desplegable Weight nos permite seleccionar el peso de la variante de la tipografía. Para que te hagas una idea cuánto menor sea el número, más delgada será la tipografía. Para ir de menos a más y llevar un orden seleccionamos 100.
Te dejamos una tabla de los pesos asociados a los nombres en la mayoría de las tipografías:
100 – Thin
200 – Extra Light / Ultra Light
300 – Light
400 – Regular
500 – Medium
600 – Semi Bold / Demi Bold
700 – Bold
800 – Extra Bold / Ultra Bold
900 – Black / Heavy
Paso 2 Selecciona el Estilo:
El desplegable Style nos permite seleccionar el estilo, si es una tipografía Normal, o Itálica (Inclindada).
En nuestro caso seleccionamos Normal.
Paso 3 Sube la Tipografía en WOFF2:
En la parte inferior del cuadro, hay varias opciones de formatos de tipografía, debes pulsar en el botón “Upload” asociado al formato WOFF2.
Se nos abrirá el recuadro de subida de archivos. En este paso vamos a aprovechar y arrastramos todas las versiones de la tipografía que tenemos para subirlas todas de golpe, esto no tendremos que hacerlo siempre porque ya las tendremos subidas a nuestro WordPress.
Una vez subidas todas las versiones, seleccionamos el formato que estamos creando, en este caso Thin, ya que estamos creando el peso 100.
Paso 4 Sube el resto de Pesos de la tipografía:
Para continuar el proceso, debes pulsar en “Add Static Font” y repetir los pasos 1, 2 3 que hemos visto anteriormente.
Puedes subir variaciones, hasta el número 900, para completar el estilo visual tipográfico de tu página web.
Publica tu Nueva Tipografía Personalizada en WordPress
Con todas las variantes de peso creadas, pulsa en el botón de Publicar ubicado arriba a la derecha y ya tendremos nuestra propia Custom Font en WordPress que podremos usar para construir y diseñar nuestra página web en Elementor.
Posibles Errores de Visualización
Hay veces que nuestra tipografía no se visualiza en la web. Para comprobarlo es tan fácil como pegar el enlace de tu web en un navegador privado y comprobar si se cargan las tipografías personalizadas.
Si estas no se cargan, una posible solución que te damos es que desactives las tipografías de Google en Elementor.
Para hacerlo accede a Elementor, Ajustes, Avanzado. Verás la opción de Google Fonts, desactívala.
Motivos para subir una tipografía personalizada a nuestro WordPress
¿Por qué queremos subir una tipografía custom a wordpress? Ahora te explicaremos cuáles son los motivos principales por los que deberías plantearte subir una tipografía custom a tu sitio web.
Optimización
Desactivar las fuentes de Google en el constructor Elementor puede ayudar a mejorar la velocidad y el rendimiento de nuestra página ya que estos tipos necesitan de peticiones externas que ralentizan el tiempo de carga de nuestro sitio. Usar tipografías subidas de manera local aporta los siguientes beneficios:
- Reducción de consumo de recursos.
- Mayor velocidad de carga.
- Mejorar la experiencia de usuario.
- Mejora en posicionamiento SEO.
Básicamente, al reducir el consumo de recursos, todo lo demás se ve mejorado.
Estilo de Marca
Si queremos ser consecuentes con nuestra marca deberemos seguir su manual de estilo. Si tu marca utiliza una tipografía que no se encuentra en Google Fonts, que es de dónde bebe Elementor para mostrar tipografías, lo que tendrás que hacer es subirla a WordPress como te hemos explicado en esta entrada.
La subiremos para seguir la línea gráfica de nuestra marca y evitar incoherencias visuales. Estas incoherencias pueden llegar a hacer que el usuario piense que se trata de otra marca diferente o una web estafa.
Hay que tener en cuenta que si la tipografía es muy recargada o con muchos detalles, deberemos usarla en espacios legibles como títulos principales y optar por una tipografía más sencilla para el resto de textos, como la Inter o la Open Sans que se encuentran disponibles en Google Fonts de Elementor.