Al crear páginas con Elementor, muchas personas se encuentran con un problema: las fuentes configuradas en el editor se ven bien, pero la página del frontend muestra las fuentes predeterminadas, o incluso ningún estilo de fuente. Una razón común para esto es que los estilos CSS del tema anulan la configuración de fuentes de Elementor.

Este artículo presenta Las fuentes de Elementor no funcionany proporcionar un conjunto de anulaciones de estilo de tema para solucionar problemas que ayuden a corregir rápidamente las anomalías de las fuentes.

En primer lugar, la fuente no muestra el rendimiento común

• Las fuentes de la portada se muestran en la fuente predeterminada del sistema (por ejemplo, Times New Roman).

• Se muestra bien en el editor, pero es inconsistente en el frontend
• Sólo algunas de las fuentes del módulo son correctas, otras no se cargan
• Elementorfuente globalEl ajuste no funciona

La mayoría de estos problemas se deben a que los estilos CSS del tema afectan a la carga de las fuentes.

?Por qué el CSS del tema anula los estilos de fuente de Elementor?

Los temas de WordPress suelen ser style.css O escribir la configuración global de fuentes en el archivo de estilo del marco, por ejemplo:

body {
  font-family: 'Noto Sans', sans-serif; }
}

Este tipo de definición de estilo afecta a todo el sitio. Si Elementor utiliza fuentes que no se declaran mediante selectores más fuertes, las fuentes de la página pueden serTema EstiloSustitución.

Algunos temas (por ejemplo, Astra, Kadence, Blocksy) admiten el control de fuentes por sí mismos, y la configuración de tipografía en el panel Configuración del tema también puede anular la configuración de Elementor.

En tercer lugar, el método para comprobar si el estilo de fuente está anulado

Método 1: Utilice las herramientas de desarrollo del navegador para ver la fuente de estilo

• Abrir la portada
• Haga clic con el botón derecho del ratón en el texto con la visualización de fuente anormal y seleccione "Comprobar".

• Busque en los paneles Estilos o Computados. font-family tipo

• Observe de qué archivo procede el estilo:
  • Si la fuente es tema.css tal vez style.cssDescripcióntemática
  • Si es elementor-frontend.cssEsto significa que la configuración de Elementor es normal.
  • si está presente ImportanteEsto significa que los estilos están obligados a ser anulados.

Compruebe también que el selector cuerpoy.entry-contenty.site-content etc. Suelen ser estilos globales definidos por el tema.

Método 2: Compruebe la configuración tipográfica del tema

Tomemos como ejemplo el tema Astra:

• Ir a Apariencia > Personalizar > Global > tipográfico

• Para ver si la fuente del cuerpo está configurada a una fuente determinada

• Si ya está configurado, puedes cambiarlo a "Heredar" o eliminar la configuración de fuente y dejar que Elementor se encargue del estilo.

Otros temas como Kadence,BlocksyHay rutas de configuración similares para OceanWP y otros.

Método 3: Comparar fuentes del editor y del frontend

• Abra el editor de Elementor para comprobar si se ha aplicado la fuente
• Comparar la visualización de la página principal para mayor coherencia
• Si no coincide, el estilo se está sobrescribiendo externamente

Cuatro, arreglar el tema CSS para anular las fuentes del método

1. Configuración de fuentes directamente en Elementor

Seleccione explícitamente las fuentes en cada módulo sin utilizar las opciones predeterminadas o heredadas:

Ruta: Estilo > Tipografía > Familias de fuentes > Seleccionar fuentes específicas

De esta forma Elementor genera estilos inline para evitar ser sobrescritos por estilos externos.

2. UtiliceCSS personalizado Aumentar la prioridad de estilo

Los usuarios de Elementor Pro pueden a?adir estilos personalizados a los módulos, por ejemplo:

selector {
  font-family: 'Roboto', sans-serif !important;
}

Si utilizas la versión gratuita, puedes a?adir un código similar con la ayuda del plugin de estilo global.

3. Desactivar la función de dise?o del tema

Algunos temas permiten desactivar la función de fuentes globales:

• Astra: Apariencia > Personalizar > Global > Tipografía > Desactivar Google Fonts
• Blocksy: Apariencia > Personalizar > Tipografía > Tipos de letra heredados

Cuando se establece en heredar, el tema no fuerza el control de la fuente.

4. Desactivar los archivos de estilo del tema con la ayuda de un plug-in (avanzado)

Los siguientes plugins pueden utilizarse para gestionar el comportamiento de carga de CSS:

• Limpieza de activosDesactivar la carga de archivos CSS de temas no deseados

• Simple Custom CSS & JS: A?ade estilos personalizados a tus páginas para una mayor prioridad

V. Resumen

Las fuentes de Elementor no se muestranLa mayoría de estos problemas están causados por anulaciones del estilo del tema o por una lógica de herencia rota. La comprobación del origen de las fuentes mediante las herramientas de desarrollo del navegador, combinada con el ajuste de la configuración tipográfica del tema y la especificación del estilo de fuente exacto, puede resolver rápidamente el problema de que las fuentes no surtan efecto.

Si también se encuentra con una situación similar, puede consultar el método anterior de investigación y ajuste, para encontrar el origen de los conflictos de estilo y conseguir un efecto de representación de fuentes uniforme y estable.

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨詢：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres