WordPress
¿Por qué usar fuentes externas en Elementor?
Antes de entrar en materia, vale la pena entender el porqué:
- Diferenciar tu marca del resto
- Mejorar la estética y legibilidad
- Usar tipografías corporativas propias
- Reducir dependencia de Google Fonts (privacidad y rendimiento)
Los formatos de archivo
Para que tu fuente se vea bien en todos los navegadores, lo ideal es tenerla en varios formatos. Aunque hoy en día el formato .woff2 es el estándar de oro por su compresión y velocidad, Elementor admite:
- WOFF/WOFF2 (Recomendado)
- TTF (TrueType)
- OTF (OpenType)
- SVG (Para navegadores muy antiguos)
Métodos para instalar fuentes externas
Tienes varias formas de hacerlo, dependiendo de tu nivel y necesidades. Aquí van las más importantes:
Método 1: Subir fuentes directamente desde Elementor Pro
Este método solo funciona con Elementor Pro, que incluye una función nativa para subir fuentes personalizadas.
- Ve a tu panel de WordPress
- En el menú lateral, entra en:
Elementor → Custom Fonts (Fuentes personalizadas) - Haz clic en “Add New” (Añadir nueva)
- Pon un nombre a tu fuente
- Sube los archivos de la fuente (formatos recomendados):
- .woff
- .woff2
- .ttf (menos recomendado)
- Asigna los pesos (Regular, Bold, etc.)
- Guarda los cambios
Si usas la versión gratuita de Elementor, la opción de «Custom Fonts» no aparecerá. En ese caso, tienes dos opciones.
Método 2: Añadir fuentes mediante CSS (@font-face)
Este método es más técnico, pero útil si no tienes Elementor Pro.
- Sube tu fuente a tu servidor (por ejemplo, en /wp-content/uploads/fonts)
- Ve a:
Apariencia → Personalizar → CSS adicional - Añade este código:
@font-face { font-family: 'MiFuente'; src: url('https://tusitio.com/wp-content/uploads/fonts/mifuente.woff2') format('woff2'), url('https://tusitio.com/wp-content/uploads/fonts/mifuente.woff') format('woff'); font-weight: normal; font-style: normal; }- Guarda cambios
- Luego, en Elementor, escribe manualmente el nombre: Mifuente
Método 3: Usar plugins de fuentes personalizadas
Si usas la versión gratuita de Elementor y quieres simplificar aún más el proceso, puedes usar plugins.
Opciones populares:
- Custom Fonts
- OMGF (para Google Fonts locales)
- Use Any Font
Estos plugins suelen permitir:
- Subir fuentes fácilmente
- Asignarlas sin tocar código
- Mejorar el rendimiento
Consejos finales
- No subas demasiadas variantes (ralentiza la web): Subir 10 fuentes diferentes hará que tu web cargue muy lento. Intenta limitarte a 2 o 3 variantes.
- Usa WOFF2: Es hasta un 30% más ligero que el formato TTF, lo que mejora tus puntuaciones en Google PageSpeed.
- Verifica que tienes licencia para usar la fuente
Problemas comunes y su solución
La fuente no aparece en Elementor
- Asegúrate de haberla guardado correctamente
- Limpia caché (plugin o navegador)
La fuente se ve diferente
Puede faltar el peso (bold, italic, etc.)
Carga lenta
Demasiadas fuentes o formatos pesados
Instalar fuentes externas en Elementor no es complicado, pero hacerlo bien marca una gran diferencia en el diseño y rendimiento de tu web.
Si tienes Elementor Pro, usa su sistema nativo. Si no, usar algún plugin especial o el método CSS, siguen siendo totalmente válidos.
