Le style d'Elementor est perdu après le réglage de la police ? La bonne façon d'ajouter des CSS manuellement

en cours d'utilisation Elementor Lors de la construction d'une page, de nombreuses personnes rencontrent un problème : la police est clairement définie, l'éditeur est correct, mais une fois au premier plan, tout est chamboulé. Certaines deviennent la police par défaut, d'autres n'ont tout simplement aucun effet. Cette situation est le plus souvent liée au style du thème, à la mise en cache ou à la priorité de chargement. Cette fois-ci, directement avec l'outil CSS Contrôlez manuellement le style de la police et débarrassez-vous définitivement du problème de la police de la manière la plus directe et la plus efficace.

1) Pourquoi la police ne fonctionne-t-elle pas après le réglage ?

Dans WordPress, les styles de police peuvent provenir de plusieurs endroits :

• Feuilles de style du thème actuel (par exemple Hello, Astra, Blocksy, etc.)
• La fonctionpolice globalemettre en place
• Paramètres de police pour les modules individuels
• Styles externes injectés par le plugin

Ces styles peuvent se substituer l'un à l'autre, et une fois que l'une des règles définit le style !important ou chargé dans un ordre ultérieur, cela pourrait vous mettre dans l'embarras. Elementor La police que vous avez définie dans la case "Presser" est "pressée" dans le document.

Par conséquent, si vous souhaitez que le style de police s'affiche de manière cohérente, le moyen le plus simple est d'écrire manuellement la directive CSSet s'assurer qu'il estprioritéSuffisamment élevé.

2. voir qui couvre la police actuelle

Ouvrez la page d'accueil de votre site web, faites un clic droit sur le texte → sélectionnez "Inspecter l'élément" (Chrome)

Pour afficher la balise de texte correspondante dans Developer Tools (F12), regardez à droite du panneau CSS pour le symbole police de caractères provient de quel fichier de style, est le Elementor ou celle du thème. Si la police d'Elementor est barrée et que la police du thème a le caractère !important cela signifie qu'il s'agit d'un sujet imposant une dérogation.

Dans ces cas-là, la meilleure chose à faire est d'écrire un paragraphe de votre cru CSSJe vais "récupérer" la police de caractères.

3) Où dois-je ajouter le CSS ?

Il y a trois endroits recommandés pour ajouter des feuilles de style CSS personnalisées :

Méthode 1 : WordPress Backend → Appearance → Customisation → Append CSS
Convient pour les modifications de style génériques à l'échelle du site qui ne dépendent pas d'Elementor.

Méthode 2 : Éditeur Elementor → menu Paramètres de gauche → CSS personnalisé
Idéal pour ajuster les styles uniquement pour la page en cours ou un module.

Méthode 3 : Définition du nom de la classe CSS pour un module spécifique
en moduleParamètres avancésAjoutez-lui un nom de classe, puis contrôlez précisément cette classe en CSS.

4. exemple CSS : affichage stable des polices de caractères

En supposant que vous souhaitiez utiliser la police "PingFang SC" pour tous les paragraphes, vous pouvez ajouter le style suivant :

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

Cet article paru dans le !important est essentiel, car il permet de remplacer les styles de police provenant d'autres sources. Vous pouvez également utiliser l'ID ou le nom de la classe pour lui donner plus de poids :

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

Si vous avez plusieurs modules qui utilisent la même police, il peut être intéressant de les unifier en un seul nom de classe, par exemple .site-font-defaultEnsuite, unifier la gestion.

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

Ajouter le nom de la classe aux options "Avancées" du module. site-font-default.

5. éviter les erreurs courantes

• Fautes d'orthographe : assurez-vous toujours que le nom de la police est correctement orthographié et que la casse est cohérente.
• Références de polices manquantes : si l'on utilisePolices de caractères personnaliséesN'oubliez pas d'utiliser Elementor ou un plugin au préalable.Télécharger les policessinon le navigateur affichera la police par défaut s'il ne la trouve pas.

• Cache non actualisé : N'oubliez pas d'effacer le cache d'Elementor après avoir modifié le style et d'actualiser la page pour voir l'effet.
• Problème d'ordre de chargement des polices : s'il s'agit d'une police externe telle que Google Fonts, assurez-vous que la ressource de police est chargée dans l'en-tête de la page, sinon elle risque de scintiller ou d'échouer.

6. conseils pour améliorer l'efficacité du chargement

Lorsque vous définissez les polices manuellement, essayez de :

• Ne chargez que les graisses dont vous avez besoin, par exemple seulement Regular et Bold, pas toutes les graisses.
• Utilisez les polices du système comme alternative, par exemple font-family : 'Roboto', Arial, sans-serif ;
• Placez les ressources en polices de caractères localement ou utilisez un système stable de gestion des polices de caractères. CDNÉviter les échecs de chargement

résumés

Lorsque les paramètres de police d'Elementor sont absents, il est fort probable que d'autres styles " volent la vedette ". Au lieu de procéder à des modifications itératives, vous pouvez utiliser la fonction CSS Prenez le contrôle vous-même. Tant que vous trouvez le bon élément cible avec le bon style et le bon poids, le problème de l'affichage des polices peut être résolu. Une fois l'ajustement en place, l'utilisateur suivant n'a plus à se préoccuper de la question.

Mises à jour récentes

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.