Les polices Elementor ne s'affichent pas ? Découvrez les paramètres du serveur et du CDN une fois pour toutes !

De nombreux webmasters qui utilisent Elementor pour créer des sites web rencontrent ce problème : après avoir défini des polices Google Fonts ou des polices personnalisées sur une page, le front-end ne les affiche jamais, ou le navigateur signale une erreur.Échec du chargement des polices. Cela n'a généralement rien à voir avec la configuration du serveur ou avec le fait qu'il ne soit pas en état de fonctionner. CDN Mise en place de l'outil approprié

Manifestation courante : phénomène de rupture de charge des polices

• La console signale une erreur :Échec du chargement de la ressource : net::ERR_BLOCKED_BY_CLIENT peut-être 403 Interdit
• Le style de police fonctionne correctement dans l'aperçu de l'éditeur, mais devient la police par défaut lorsqu'on y accède au premier plan.
• L'adresse de la police passe au CDN mais ne se charge pas
• Lenteur ou absence totale d'accès aux ressources en polices dans certains pays ou régions

Ces problèmes ne sont pas rares, surtout si le site est activé avec l'option Cloudflare Ou si les paramètres d'optimisation de la vitesse d'accès domestique sont utilisés.

Analyse des causes possibles

1. le serveur bloque les demandes de ressources de police

Certains serveurs peuvent être affectés par des règles de sécurité telles que les règles de sécurité d'Apache .htaccess(configuration des en-têtes de Nginx) en bloquant .woffet.ttf etc. sont chargés à travers les domaines. Vous pouvez vérifier s'il manque dans l'en-tête de la réponse l'élément Contrôle d'accès-Allow-Origin : *.

Solution :
Si vous utilisez ApacheVoici un exemple du type de données que l'on peut trouver dans le fichier .htaccess Le texte suivant a été ajouté au dossier :

En-tête défini Access-Control-Allow-Origin "*"
  </FilesMatch

2. les caches CDN ne sont pas vidés ou synchronisés avec les chemins d'accès aux polices

Accès au site CDN Il arrive que les fichiers de police ne soient pas mis en cache correctement ou que le chemin d'accès pointe vers une ancienne ressource. En particulier lorsque les fichiers de police viennent d'être remplacés ou que les paramètres de police viennent d'être modifiés, le nœud CDN peut ne pas s'être synchronisé avec les fichiers les plus récents.

Solution :

• Accès aux consoles CDN (par exemple Cloudflare, Tencent Cloud, AliCloud, etc.)
• Vider le cache

• Force le rafraîchissement du chemin d'accès au fichier de police (par ex. /wp-content/uploads/fonts/)

3. désactivé le chargement externe des polices pour Elementor.

Elementor Pro Une fonction d'optimisation des polices permet de désactiver le chargement des polices externes dans les paramètres de performance. Si cette option est activée et qu'aucune police locale n'est téléchargée, les polices ne s'afficheront pas correctement.

Solution :

• Allez dans Paramètres Elementor > Lab (ou Feature)

• Assurez-vous que l'option "Polices Google inactives" est activée.

• Si cette option est activée, veillez à téléchargerPolices de caractères personnaliséeset se lier à l'élément correspondant

4. l'accès domestique aux polices Google est bloqué

Si votre site est destiné à des utilisateurs en Chine continentale, il ne se chargera probablement pas avec les polices de Google parce que l'accès est restreint, lent ou inexistant.

Solution :

• Utilisez un service de mise en miroir domestique tel que fonts.loli.net
• Vous pouvez également télécharger les polices localement et utiliser la fonction "Polices personnalisées" d'Elementor Pro pour les télécharger et les lier.

Pratique recommandée : Optimisation du chargement des ressources des polices

• Polices de caractères déployées localement : sécurité, rapidité, pas de dépendance à l'égard de ressources externes.
• Activation des en-têtes inter-domaines : éviter les problèmes CORS avec le chargement des polices
• Configurer correctement les règles de mise en cache du CDN : définir le paramètre .woffet.woff2 Les fichiers Isofont sont mis en cache pour une longue période.

• Définir le numéro de version d'un chemin d'accès aux polices : éviter la mise en cache des anciens fichiers par le CDN
• Utilisation des polices de caractèrespréchargée(preload) : augmente la vitesse de rendu de la première page.

Exemple de balise de préchargement :

<link rel="preload" href="/wp-content/uploads/fonts/custom.woff2" as="font" type="font/woff2" crossorigin="anonymous">

résumés

Polices ElementorLes échecs de chargement peuvent ne pas être un problème avec le plugin lui-même, mais sont étroitement liés au serveur, au CDN ou à la source de ressources. La compréhension de ces logiques sous-jacentes peut permettre de résoudre le problème de police immédiat et d'améliorer l'efficacité globale du chargement du site.

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.