Cuando creas tu página web con Elementor, tienes una gran selección de tipografías de Google Fonts que puedes utilizar en tu web. Sin embargo, a veces no tienen esas tipografías tan bonitas que se te antoja utilizar, o quizás no encuentras las fuentes que tu diseñador te ha proporcionado como parte del branding de tu marca.
Esto nos deja con tres opciones:
- Elegir una tipografía de Google Fonts que esté disponible en Elementor y que se parezca a la tipografía de tu marca.
- Crear gráficos para tu web que contengan tu tipografía de marca y subirlos uno a uno como imágenes a tu web (lo cual no es para nada productivo y un trabajo que tardarás horas en hacer).
- Subir tus tipografías personalizadas a Elementor y seleccionarlas como tu tipografía principal, para párrafos o títulos y poder aplicarla a cualquier elemento de tu web de manera rápida y sencilla.
Está claro que esta última opción es la mejor. Así que vamos a ver cómo subir tipografías personalizadas a Elementor, cómo puedes configurar Elementor para que se apliquen a títulos y textos y dónde puedes encontrar tipografías diferentes y muy bonitas que pueden ayudarte a crear una web (y marca) que te diferencie del resto.
Antes de empezar:
- Cuando compres una tipografía, deberás de asegurarte de que tienes la licencia correcta para utilizarla en tu web. Normalmente los detalles vienen en un documento que descargas tras la compra. Si no es así, asegúrate de escribir al marketplace donde has comprado la tipografía o a su creador para asegurarte de que puedes usarla en tu web. Mejor ser precavidos y evitar una multa.
¡Vamos a ello!
Tutorial para subir tus tipografías personalizadas a Elementor
Paso uno. Prepara las tipografías.
Cuando compras y descargas una tipografía, normalmente descargas un documento con formato .TTF o OTF. Y eso está genial, pues es lo básico que necesitamos para subir tus tipografías a Elementor.
No obstante, si quieres que tus tipografías se vean en todos los navegadores y no den ningún problema (todavía hay gente que, aunque no lo creas, utiliza Internet Explorer…!), necesitamos que tu tipografía esté en un par de formatos más.
Lo ideal es que tengas tres versiones de tu tipografía:
- .TTF o .OTF
- .WOFF
- .WOFF2
Por suerte, si al comprar tu tipografía estas versiones no están presentes, este generador de fuentes web de FontSquirrel te permite subir tu tipografía en formato .TTF o .OTF y generar el resto de versiones que necesitas para tu web.
Descarga tus ficheros y tenlos a mano para el siguiente paso.
Paso dos. Sube tus tipografías personalizadas a Elementor.
Subir tus tipografías personalizadas a Elementor es súper sencillo. Vamos a ver el paso a paso para que puedas hacerlo cómodamente:
Desde tu escritorio WordPress y con Elementor instalado ve a «Elementor» > «Tipografías personalizadas»
Haz clic en «Añadir Fuente»
Da un nombre a tu fuente (el propio nombre de la tipografía). Elige «fuente estática» si tienes ficheros distintos para las tipografías negrita, regular y cursiva.
Elige el peso de la fuente que vas a subir, y sube los ficheros indicados uno a uno.
Una vez hayas terminado, haz clic en publicar para que la tipografía esté disponible y accesible a través del editor.
Paso tres. Configura las fuentes globales en Elementor.
Una vez has subido tus tipografías personalizadas, puedes configurar las fuentes globales de Elementor para aplicarlas a cualquier texto de tu web de manera fácil y rápida:
Elige una página de tu web y haz cilc en «Editar con Elementor»
En el menú superior, arriba a la izquierda, haz clic en «ajustes del sitio».
Se abrirá el menú de ajustes globales, haz clic en «fuentes globales»
Se abrirá un panel donde verás numeradas varias fuentes. La «principal» corresponde a títulos, «secundaria» a subtítuos, «texto» a párrafos de texto y «énfasis» a la tipografía de los botones. Puedes configurar las características de cada una de ellas haciendo clic en el lápiz de la derecha. Podrás elegir la tipografía, tamaño, grosor y otras características.
Si quieres añadir más variaciones, puedes hacerlo añadiendo un estilo de fuente personalizada más abajo.
Haz clic en «guardar cambios», abajo del todo y tus tipografías personalizadas ya estarán configuradas.
Paso cuatro. Aplica la tipografía a cualquier texto de tu web.
Una vez tienes las tipografías globales configuradas, puedes aplicaras de manera súper fácil a cualquier texto de tu página web:
Desde la página que quieras modificar, haz clic en un texto o titular que quieras modificar.
Dentro del menú de edición, ve a la pestaña de «estilo».
En «tipografía» en lugar de hacer clic en el botón del lápiz, selecciona el botón circular de la izquierda.
Verás que se despliegan tus tipografías personalizadas. Puedes seleccionar el estilo que quieras de los que tienes guardados para aplicarlo a tu texto. Guarda tus cambios y listo.
Dónde encontrar tipografías personalizadas.
Ahora que sabes cómo subir tus tipografías personalizadas a Elementor y cómo configurar tus fuentes globales para tenerlas a mano y modificar todos los textos y titulares de tu web, hablemos de dónde puedes encontrar tipografías bonitas que den un toque especial a tu página.
Te dejo aquí algunas de mis páginas favoritas (gratuitas y de pago) para encontrar esa tipografía especial que dará un toque distinto a tu web:
Creative Market
Creative Market es un marketplace de diseño lleno de recursos, plantillas y tipografías que te pueden ayudar a crear tu marca. Puedes encontrar una gran selección de tipografías a distintos precios, y elegir la que mejor se adapte a lo que necesitas.
La mejor parte de Creative Market es que normalmente tienen especificaciones claras sobre las licencias de las tipografías disponibles en su web, lo que hace mucho más fácil saber qué tienes que comprar para estar cubierta.
Adobe Fonts
En Adobe Fonts no es necesario pagar por cada fuente: puedes acceder a todas ellas si tienes una suscripción a Adobe Creative Cloud. Una vez suscrita obtendrás acceso ilimitado a su enorme biblioteca de fuentes.
En la plataforma puedes filtrar por estilo de tipografiá para encontrar exactamente lo que buscas, e incluso explorar paquetes de fuentes seleccionados.
Google Fonts
Google Fonts tiene una enorme biblioteca de fuentes preciosas, ¡todas completamente gratis!
La mejor parte es que si utilizas una tipografía de Google Fonts en tu web… ¡no tendrás que subir nada a tu web! Todas son accesibles a través de Elementor, en todos sus pesos y versiones.
Como ves, hay muchas opciones para encontrar la tipografía perfecta y utilizarla en tu web. El proceso puede parecer un poco abrumador al principio pero con un poco de paciencia y una idea básica del estilo que buscas, estoy segura de que encontrarás la que más se adecúa a tu marca.
¡Listo! Ya tienes tus tipografías personalizadas subidas a Elementor y listas para poder usarlas en todos los textos de tu web. Como ves, es un sencillo paso a paso que ni siquiera requiere que tengas conocimientos técnicos. Esa es la magia de Elementor.
Si te ha gustado esta guía paso a paso, te dejo aquí otros tutoriales que te pueden resultar útiles a la hora de crear tú misma tu página web:
