Comment héberger des polices locales dans WordPress pour un site plus rapide

Une belle typographie peut améliorer le design de votre site et captiver votre public. Mais en tant qu’experts en performances WordPress, nous trouvons que s’appuyer sur des services de polices tiers peut ralentir votre site, nuire à l’expérience utilisateur et potentiellement nuire à votre référencement.

La solution consiste à héberger les polices localement. En prenant le contrôle de vos fichiers de polices, votre site peut aller à/au-delà des étapes de chargement supplémentaires, garantissant ainsi un site ultra-rapide avec une meilleure expérience pour l’utilisateur et un meilleur référencement.

Dans cet article, nous vous afficherons comment héberger des polices locales dans WordPress, ce qui vous permettra d’améliorer la typographie de votre site tout en conservant des performances optimales.

Pourquoi héberger les polices de caractères localement dans WordPress ?

Bien que la typographie et les polices personnalisées puissent améliorer l’esthétique générale du site, elles ont un impact négatif sur les performances de votre WordPress. Par exemple, si vous utilisez une police personnalisée à partir de Google Fonts, elles sont alors chargées à partir de services tiers, ce qui ralentira votre site.

Outil de personnalisation, il existe un moyen d’utiliser des polices personnalisées sans ralentir votre site. Une nouvelle API Webfonts a été introduite dans WordPress 6.0. Elle vous permet d’héberger les polices localement afin qu’elles se chargent plus rapidement.

Une autre raison d’héberger les polices Google localement est de rester en conformité avec le RGPD. C’est une considération juridique importante si vous avez des internautes de l’Union européenne sur votre site.

Lorsqu’une personne visite un site qui utilise les polices de caractères Google, son adresse IP est connectée par Google lorsque les polices sont chargées. Étant donné que cette opération est effectuée sans son droit, l’Union européenne considère désormais qu’il s’agit d’une violation des règles en matière de confidentialité, et vous pouvez être tenu responsable des dommages subis.

Ceci étant dit, voyons comment héberger des polices locales dans WordPress pour un site plus rapide. Nous allons couvrir deux méthodes, et la première méthode est recommandée pour la plupart des utilisateurs/utilisatrices.

Méthode 1 : Héberger les polices locales dans WordPress avec une extension

La première chose à faire est d’installer et d’activer l’extension OMGF (Optimize My Google Fonts). Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

OMGF est l’une des meilleures extensions de typographie WordPress. Il offre un moyen convivial pour les débutants d’améliorer les performances et la conformité au RGPD en hébergeant les polices Google localement.

Une fois activé, vous devez vous rendre dans Réglages  » Optimize Google Fonts pour configurer l’extension. Vous devez vous trouver dans l’onglet « Optimiser les polices ».

Remarquez la notification sous le Titre « Optimize Google Fonts » selon laquelle il vous suffit d’utiliser les Réglages par défaut pour remplacer automatiquement vos polices Google par des copies hébergées localement.

Cela signifie que lorsque vous défilez sur la page des Réglages, tout ce que vous avez à faire est de vous assurer que l' »Option d’affichage des polices » a le paramètre par défaut « Échanger (recommandé) » sélectionné.

Il ne vous reste plus qu’à cliquer sur le bouton « Enregistrer et optimiser » au bas de la page.

Un message s’affiche en haut de l’écran : « Optimisation bien terminée ».

Nous vous félicitons ! Vos polices Google sont désormais hébergées localement. Votre site se chargera plus rapidement et vous avez réduit le risque de poursuites européennes.

Méthode 2 : Héberger manuellement les polices locales dans WordPress

Vous pouvez également héberger des polices localement sans utiliser d’extension en utilisant la méthode @font-face de notre guide sur la façon d’ajouter des polices personnalisées dans WordPress. Bien que cette méthode nécessite plus de travail, elle vous permet d’utiliser n’importe quelle police que vous aimez sur votre site.

Vous devez télécharger les polices que vous souhaitez utiliser au format web. Il existe de nombreux endroits où trouver d’excellentes polices web gratuites, comme Google Fonts, Typekit, FontSquirrel, et bien d’autres encore.

Si vous ne disposez pas du format web pour votre police, vous pouvez la convertir à l’aide du générateur de polices web FontSquirrel.

Vous devez maintenant stocker les polices sur votre serveur d’hébergement WordPress. Vous pouvez téléverser les fichiers par FTP ou en utilisant le gestionnaire de fichiers cPanel de votre hébergeur.

Vous devez créer un nouveau dossier appelé « fonts » dans le répertoire de votre thème ou thème enfant et le téléverser à cet endroit.

Une fois la police téléversée, vous devez la charger dans la feuille de style de votre thème à l’aide d’un CSS personnalisé. Vous pouvez ajouter le code directement au fichier style.css de votre thème, ou en utilisant la section CSS supplémentaire du personnalisateur de thème.

Vous pouvez le faire en utilisant une règle CSS3 @font-face comme celle-ci :

@font-face {
    font-family: Arvo;
    src: url(http://example.com/wp-content/themes/twentytwentyone/fonts/Arvo-Regular.ttf);
    font-weight: normal;
}

N’oubliez pas de remplacer la famille de polices et l’URL par les vôtres.

Ensuite, vous pouvez utiliser cette police n’importe où dans la feuille de style de votre thème ou dans la section CSS supplémentaire du personnalisateur de thème. Le CSS que vous utilisez dépendra de votre thème et de l’endroit où vous souhaitez utiliser la police locale. Voici un exemple tiré de notre site de démonstration :

h1 {
font-family: Arvo, Arial, sans-serif;
}

Comme vous pouvez le constater, notre Titre utilise désormais la police Arvo hébergée localement.

Guides d’experts sur les polices de caractères dans WordPress

Maintenant que vous savez comment héberger des polices locales, vous pouvez consulter d’autres guides liés à l’utilisation des polices dans WordPress.

• Qu’est-ce qu’une police sûre pour le Web + 19 meilleures polices sûres pour le Web
• Comment modifier les polices de caractères dans votre thème WordPress (méthodes faciles)
• Comment modifier facilement la taille de la police dans WordPress
• Comment ajouter des polices personnalisées dans WordPress
• Comment rendre les polices de Google plus confidentielles ?
• Comment désactiver Google Fonts sur votre site WordPress
• Comment ajouter facilement des polices d’icônes dans votre thème WordPress
• Les meilleures extensions de typographie WordPress pour améliorer votre design

Nous espérons que ce tutoriel vous a aidé à apprendre comment héberger des polices locales dans WordPress pour un site plus rapide. Vous pouvez également consulter notre guide sur la façon d’augmenter le trafic de votre blog, ou notre choix d’experts des extensions WordPress indispensables pour développer votre site.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.