Cómo Configurar Fuentes Personalizadas en Elementor Pro

Configurar fuentes personalizadas en Elementor Pro puede marcar una gran diferencia en el rendimiento y apariencia de tu página web. En este artículo, te explicaré paso a paso cómo hacerlo, además de compartir consejos prácticos para optimizar tu sitio web.

¿Por Qué Usar Fuentes Personalizadas?

Aunque Elementor ofrece acceso a todas las fuentes de Google, usarlas directamente puede afectar la velocidad de carga de tu página. Esto ocurre porque cada vez que se actualizan, estas fuentes se descargan nuevamente, aumentando el tiempo de carga tanto para el usuario como para el servidor. Usar fuentes personalizadas es una forma eficaz de resolver este problema.

Paso 1: Descarga y Selección de Fuentes

1. Elige una fuente que se adapte a tu diseño desde plataformas como Google Fonts.
2. Descarga únicamente los estilos y grosores que necesites (por ejemplo, Regular, Light o Bold).
3. Convierte los archivos a formatos más livianos como WOFF2, utilizando herramientas en línea.

Consejo: Evita formatos antiguos como TTF, ya que son más pesados y menos eficientes.

Paso 2: Desactiva Google Fonts en Elementor

Antes de subir tus fuentes personalizadas, desactiva las fuentes de Google en Elementor para evitar que se carguen innecesariamente.

1. Ve a Ajustes en Elementor.
2. Desactiva la opción de Google Fonts y guarda los cambios.

Paso 3: Carga de las Fuentes en Elementor

1. Accede al panel de Elementor y ve a Fuentes Personalizadas.
2. Crea una nueva fuente, nómbrala y sube los archivos convertidos en formato WOFF2.
3. Asigna los grosores correspondientes (100, 200, 300, etc.) para asegurarte de que funcionen correctamente.

Paso 4: Aplicación de Fuentes Globales

1. Configura las fuentes globales en Elementor para mantener la consistencia en todo tu sitio.
2. Define estilos específicos para encabezados, párrafos y botones según las necesidades de tu diseño.

Optimización Adicional con CSS

Puedes usar variables globales de Elementor para aplicar estilos de fuente directamente en CSS. Esto te permitirá mantener todo centralizado y hacer cambios fácilmente cuando sea necesario.

Por ejemplo:

font-family: var(--e-global-typography-primary-font-family);  
font-size: var(--e-global-typography-primary-font-size);  

Esto asegura que cualquier cambio en las fuentes globales se aplique automáticamente en todo el sitio.

Conclusión

Configurar fuentes personalizadas no solo mejora la velocidad de tu página, sino que también te permite tener un control total sobre el diseño. Recuerda siempre optimizar los recursos para mantener tu sitio ligero y rápido.

Si tienes dudas o quieres compartir tus experiencias, ¡déjalas en los comentarios! Estoy aquí para ayudarte.