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

Une belle typographie peut améliorer le design de votre site web et captiver votre audience.

Mais en améliorant les performances de notre site web, nous avons découvert que le recours à des services de polices tiers peut ralentir WordPress, nuisant à l'expérience utilisateur et potentiellement à votre SEO.

Nous avons trouvé quelques moyens d'éviter ce problème. Une solution consiste à héberger les polices localement.

En prenant le contrôle de vos fichiers de polices, votre site peut éviter ces étapes de chargement supplémentaires, garantissant un site web ultra-rapide avec une meilleure expérience utilisateur et un meilleur SEO.

Dans cet article, nous vous montrerons comment héberger des polices locales dans WordPress, vous permettant d'améliorer la typographie de votre site tout en maintenant des performances optimales.

Pourquoi héberger les polices localement dans WordPress ?

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

Heureusement, 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. Cela 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 conforme au RGPD. C'est une considération légale importante si vous avez des visiteurs de l'Union européenne.

Lorsqu'une personne visite un site Web qui utilise les polices Google, son adresse IP est enregistrée par Google lorsque les polices sont chargées. Comme cela se fait sans leur permission, l'UE considère désormais cela comme une violation des réglementations sur la vie privée, et vous pourriez être tenu responsable de dommages.

Cela dit, examinons comment héberger des polices locales dans WordPress pour un site Web plus rapide. Nous couvrirons deux méthodes, et la première méthode est recommandée pour la plupart des utilisateurs.

1. Héberger des polices locales dans WordPress avec un plugin
2. Héberger des polices locales dans WordPress manuellement
3. Guides d'experts sur les polices dans WordPress

Méthode 1 : Héberger des polices locales dans WordPress avec un plugin

La première chose que vous devez faire est d'installer et d'activer le plugin OMGF (Optimize My Google Fonts). Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

OMGF est l'un des meilleurs plugins de typographie WordPress. Il offre un moyen convivial d'améliorer les performances et la conformité au RGPD en hébergeant les polices Google localement.

Après l'activation, vous devez visiter Paramètres » Optimiser les polices Google pour configurer le plugin. Vous devriez voir l'onglet « Optimiser les polices ».

Notez l'instruction sous l'en-tête « Optimiser les polices Google » indiquant que vous devez simplement utiliser les paramètres par défaut pour remplacer automatiquement vos polices Google par des copies hébergées localement.

Cela signifie qu'en faisant défiler la page des paramètres, tout ce que vous avez à faire est de vous assurer que l'option « Option d'affichage des polices » a le paramètre par défaut « Swap (recommandé) » sélectionné.

Tout ce que vous avez à faire maintenant est de cliquer sur le bouton « Enregistrer et optimiser » en bas de la page.

Vous verrez un message en haut de l'écran indiquant « Optimisation terminée avec succès. »

Félicitations ! Vos polices Google sont maintenant hébergées localement. Votre site Web se chargera plus rapidement et vous avez réduit le risque de poursuites judiciaires européennes.

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

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

Vous devez télécharger les polices que vous souhaitez utiliser dans un format Web. Il existe de nombreux endroits pour trouver d'excellentes polices Web gratuites, telles que Google Fonts, Typekit, FontSquirrel, et plus encore.

Si vous n'avez pas le format Web pour votre police, vous pouvez la convertir en utilisant le générateur de polices Web FontSquirrel.

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

Vous devriez créer un nouveau dossier appelé « fonts » dans le répertoire de votre thème ou de votre thème enfant et y télécharger le fichier.

Une fois que vous avez téléchargé la police, vous devez la charger dans la feuille de style de votre thème en utilisant des CSS personnalisés. Vous pouvez ajouter le code directement au fichier style.css de votre thème, ou en utilisant la section CSS additionnel de l'outil de personnalisation du 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.

Après cela, vous pouvez utiliser cette police n'importe où dans la feuille de style de votre thème ou dans la section CSS additionnel de l'outil de personnalisation du thème. Le CSS que vous utiliserez dépendra de votre thème et de l'endroit où vous souhaitez utiliser la police locale. Voici un exemple de notre site de démonstration :

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

Comme vous pouvez le voir, notre titre utilise maintenant la police Arvo hébergée localement.

Guides d'experts sur les polices dans WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment héberger des polices locales dans WordPress pour un site web plus rapide. Vous voudrez peut-être aussi consulter d'autres guides liés à l'utilisation des polices dans WordPress :

• Qu'est-ce qu'une police Web Safe + 19 meilleures polices Web Safe
• Comment changer les polices dans votre thème WordPress (méthodes faciles)
• Comment changer facilement la taille de la police dans WordPress
• Comment ajouter des polices personnalisées dans WordPress
• Comment rendre les polices Google respectueuses de la vie privée
• Comment désactiver les polices Google sur votre site WordPress
• Comment ajouter facilement des polices d'icônes à votre thème WordPress
• Meilleurs plugins de typographie WordPress pour améliorer votre design

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.