¿Se pierde el estilo de Elementor después de ajustar la fuente? La forma correcta de añadir CSS manualmente

en uso Elementor Al construir una página, muchas personas se encuentran con un problema: las fuentes están claramente establecidos, todo está bien en el editor, pero tan pronto como el primer plano es todo un lío. Algunos se convierten en la fuente por defecto, algunos simplemente no tienen ningún efecto. Esta situación está relacionada principalmente con el estilo del tema, el almacenamiento en caché o la prioridad de carga. Esta vez directamente con el CSS Controle manualmente el estilo de la fuente y deshágase definitivamente del problema de la fuente de la forma más directa y eficaz.

1. ¿Por qué no funciona la fuente después de configurarla?

En WordPress, los estilos de fuente pueden proceder de varios lugares:

• Hoja de estilo del tema actual (por ejemplo, Hello, Astra, Blocksy, etc.)
• Elementorfuente globalestablecer
• Configuración de fuentes para módulos individuales
• Estilos externos inyectados por el plugin

Estos estilos pueden anularse entre sí, y una vez que una de las reglas establece el Importante o cargado en un orden posterior, podría ponerle en el Elementor La fuente que establezca en la casilla "Prensa" se "presiona" en ella.

Por lo tanto, si desea que el estilo de fuente se muestre de forma coherente, la forma más sencilla es escribir manualmente la directiva CSSy asegúrese de que esprioridadLo suficientemente alto.

2. Ver quién cubre la fuente actual

Abre la portada de tu sitio web, haz clic con el botón derecho en el texto → selecciona "Inspeccionar elemento" (Chrome).

Para ver la etiqueta de texto correspondiente en Herramientas de desarrollo (F12), busque a la derecha del panel CSS el icono font-family es de qué archivo de estilo, es el Elementor o la del tema. Si la de Elementor está tachada y la fuente del tema tiene el valor Importante significa que es un tema que está forzando una anulación.

Lo más apropiado en esos momentos es escribir un párrafo propio CSSVoy a "agarrar" la fuente de nuevo.

3. ¿Dónde añado CSS?

Hay tres lugares recomendados para añadir CSS personalizado:

Método 1: Backend de WordPress → Apariencia → Personalización → Añadir CSS
Adecuado para modificaciones de estilo genéricas en todo el sitio que no dependen de Elementor.

Método 2: Editor de Elementor → Menú de configuración izquierdo → CSS personalizado.
Ideal para ajustar estilos sólo para la página actual o un módulo.

Método 3: Establecer nombres de clases CSS para módulos específicos
en móduloAjustes avanzadosAñádele un nombre de clase y luego controla esa clase precisamente en CSS.

4. Ejemplo de CSS: hacer que las fuentes se muestren de forma estable

Suponiendo que desee utilizar la fuente "PingFang SC" para todo el texto de los párrafos, puede añadir el siguiente estilo:

p {
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-size: 16px;
  font-weight: 400; }
}

Este artículo del Importante es clave, forzará la anulación de estilos de fuente de otras fuentes. También puede utilizar el ID o el nombre de la clase para darle más peso:

.elementor-widget-editor-texto p {
  font-family: 'Roboto', sans-serif !important;
}

Si tiene varios módulos que utilizan la misma fuente, puede que merezca la pena unificarlos en un único nombre de clase, por ejemplo .site-font-defaultA continuación, unifique la gestión.

.site-font-default {
  font-family: 'Open Sans', sans-serif !important; font-size: 15px; font-family: 'Open Sans', sans-serif !
  font-size: 15px;
}

Añada el nombre de la clase a las opciones "Avanzadas" del módulo. site-font-default.

5. Evitar errores comunes

• Errores tipográficos: asegúrese siempre de que el nombre de la fuente está escrito correctamente y de que las mayúsculas y minúsculas son coherentes.
• Faltan referencias de fuentes: si se utilizaFuentes personalizadasRecuerda usar Elementor o un plugin primero.Cargar fuentesde lo contrario, el navegador mostrará la fuente predeterminada si no puede encontrarla.

• Caché no refrescada: Recuerda borrar la caché de Elementor después de cambiar el estilo y refrescar la página para ver el efecto.
• Problema de orden de carga de fuentes: Si se trata de una fuente externa como Google Fonts, asegúrate de que el recurso de fuente se carga en la cabecera de la página, de lo contrario puede parpadear o fallar.

6. Consejos para mejorar la eficacia de la carga

Cuando configure las fuentes manualmente, intente:

• Cargue sólo los pesos que necesite, por ejemplo, sólo Regular y Negrita, no todos los pesos
• Utilice fuentes del sistema como alternativa, por ejemplo font-family: 'Roboto', Arial, sans-serif;
• Coloque los recursos de fuentes localmente o utilice un CDNPara evitar fallos de carga

resúmenes

Cuando faltan ajustes de fuentes en Elementor, existe una alta probabilidad de que otros estilos estén "robando el protagonismo". En lugar de modificaciones iterativas, puede utilizar CSS Toma el control tú mismo. Siempre que encuentre el elemento de destino adecuado con el estilo y el peso correctos, el problema de la visualización de la fuente puede resolverse básicamente. Una vez realizado el ajuste, no hay que molestarse en retocarlo.

Actualizaciones recientes

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