Quand il s’agit d’héberger et d’utiliser des polices sur votre site WordPress, il y a beaucoup d’options différentes. Vous pouvez les héberger localement, vous pouvez utiliser les polices Google (la plupart des thèmes ont aujourd’hui des polices Google intégrées), ou utiliser un autre service tiers comme Adobe Fonts. Aujourd’hui, nous voulons nous plonger dans quelques raisons pour lesquelles l’hébergement de polices en local dans WordPress peut être avantageux. Non seulement vous pouvez avoir un plus grand choix de polices HTML, mais il y a parfois des avantages de performance aussi. Consultez notre tutoriel détaillé ci-dessous pour savoir comment héberger vos polices premium localement ainsi que n’importe quelle famille de polices de Google.
- Qu’est ce qu’une police web ?
- Hébergement de polices en local par rapport à un service tier
- Comment héberger des polices localement dans WordPress
Qu’est ce qu’une police Web ?
Lorsque vous naviguez sur le site WordPress de quelqu’un, vous voyez deux types de polices de base, des “Web Safe Fonts” et des “Web Fonts”. Ou ils pourraient aussi utiliser un mélange des deux.
Lectures suggérées : Comment changer la police dans WordPress.
- Les Web Safe Fonts sont des polices préinstallées sur un périphérique ou un système d’exploitation. Quelques exemples pour le Web comprennent les polices Arial, Times New Roman et Courier New, ainsi que des familles de polices génériques comme serif, sans-serif (voir polices modernes) et monospace. Ce sont des polices que vous voyez depuis de nombreuses années. Voir la liste complète des Web Safe Fonts.
- Les Web Fonts sont des polices qui ne sont pas préinstallées sur un appareil et qui doivent être téléchargées par le navigateur de l’utilisateur avant d’être affichées. Quelques exemples de polices Web incluent les polices Open Sans et Roboto de Google, ainsi que la police populaire Proxima Nova d’Adobe Fonts.
Google Fonts est un répertoire de polices open source qui est devenu largement utilisé au cours des deux dernières années. Selon BuiltWith, plus de 45 % des 10 000 meilleurs sites Web utilisent les polices Google sur leurs sites Web. Et si nous regardons les statistiques de Google Fonts, nous pouvons voir qu’ils ont eu plus de 17 quadrillions de vues. C’est beaucoup ! Open Sans et Roboto sont leurs deux familles de polices les plus utilisées, avec une croissance énorme de 77% l’année dernière. Nous avons un article sur les meilleures polices Google, assurez-vous d’y jeter un coup d’oeil : 15 Meilleures polices Google en chiffres.
Hébergement de polices en local par rapport à un service tier
Avant de nous plonger dans le tutoriel, il est important de comprendre quelques-uns des avantages et des inconvénients entre l’hébergement de polices en local et l’utilisation d’un service tiers. Héberger les polices localement signifie que vous avez réellement les fichiers de polices sur votre propre serveur (et ou copiés sur votre CDN que vous utilisez également pour toutes vos autres ressources). Alors que si vous utilisez une tierce partie telle que Google Fonts ou Adobe Fonts, vous incluez simplement les polices en créant un lien vers une ressource externe.
Avantages des polices locales
1. Sélection plus large des polices de caractères
Un énorme avantage de l’utilisation de polices en local est que vous avez un choix de polices beaucoup plus large ! Bien que les services tiers tels que Google Fonts et Adobe Fonts disposent de grandes bibliothèques, ils ne se comparent en aucun cas aux boutiques de polices premium dans lesquelles vous pouvez acheter n’importe quelle police web premium que vous souhaitez et l’héberger sur votre site. En fait, nous utiliserons une police premium dans notre tutoriel ci-dessous, que vous ne pouvez obtenir d’aucun service tiers.
2. Elles pourrait mieux s’intégrer
En raison de la plus grande sélection de polices, les héberger localement pourrait vous permettre de choisir une police qui s’intègre mieux à votre image de marque afin de maintenir une cohérence dans l’ensemble du site. Tout dépend de vos besoins et de vos préférences en matière de conception.
3. Vous n’avez pas besoin de faire appel à des services tiers
Lorsque vous hébergez des polices localement, vous n’avez pas besoin de faire appel à des services tiers ou à leurs serveurs. Des services tels que Adobe Fonts (anciennement Typekit) ont été connus pour ralentir votre site, ce qui, à son tour, vous donne une mauvaise image. Avoir moins de dépendances sur votre site WordPress est toujours mieux.
When https://t.co/Kde0okKlP0 is down the web stops working #customfontssuck #3rdpartyjs
— Mark ⛔️🐝 (@markhealey) November 17, 2015
4. Contrôle total de la mise en cache
En utilisant des polices locales, vous avez un contrôle total sur la mise en cache de vos fichiers de polices. Si vous utilisez des polices Google ou un autre service tiers, vous pouvez voir des erreurs ou des avertissements indiquant qu’il manque un cache validator aux ressources ou qu’elles nécessitent des expires headers. Ceux-ci sont fixés au niveau du serveur, et lorsqu’ils sont sur un serveur tiers, vous n’avez aucun contrôle sur cela.
5. Moins de requêtes pour des temps de chargement plus rapides
Étant donné que les polices Web doivent être téléchargées à partir d’une tierce partie, cela pourrait, à son tour, avoir un impact sur la vitesse de chargement de votre site. On ne sait jamais à quelle vitesse leurs serveurs fonctionnent à un moment donné. Vous avez cependant plus de contrôle sur cela avec votre hébergeur WordPress, ou vous devriez ! Adobe Fonts, par exemple, ajoute 2 requêtes HTTP externes et encode en base64 tous les formats de polices. Si vous n’êtes pas familier avec les polices, vous n’avez plus besoin de servir tous les formats de polices, vous n’avez besoin que de WOFF et WOFF2 (si vous allez pour une compression supplémentaire).
Avec Google Fonts, vous avez également une requête DNS supplémentaire à fonts.googleapis.com pour récupérer le fichier CSS. Vous avez ensuite d’autres requêtes à fonts.gstatic.com pour télécharger les fichiers de polices. Lorsque vous hébergez localement, toutes les requêtes proviennent du même domaine, et vous n’aurez probablement pas besoin d’un autre fichier CSS car il se trouvera à l’intérieur du fichier CSS de votre thème WordPress.
6. Connexion HTTP/2 simple
Si vous n’avez pas encore pris connaissance des avantages de HTTP/2, nous vous conseillons vivement de le faire. En hébergeant vos polices localement, ou sur votre CDN, vous pouvez profiter d’une seule connexion HTTP/2 pour un meilleur parallélisme et multiplexage.
Inconvénients des polices locales
Maintenant que nous avons passé en revue les avantages des polices locales, il y a aussi quelques inconvénients à prendre en compte.
1. La police Google pourrait déjà être mise en cache
Google Fonts utilise son propre CDN, ce qui est rapide, c’est Google après tout. Étant donné que tant de sites Web utilisent déjà les polices Google, il se peut fort bien que l’utilisateur ait déjà la police dans le cache de son navigateur. Si vous utilisez une police premium plus unique, cela pourrait en fait augmenter le temps de téléchargement. Par exemple, si quelqu’un visite un site Web qui utilise la police Roboto de Google Fonts, celle-ci sera téléchargée dans sa mémoire cache. S’ils visitent ensuite votre site Web, qui utilise également Roboto, la police n’aura pas besoin d’être téléchargée à nouveau. Mais si vous utilisez une nouvelle police premium telle que Proxima Soft, elle devra très probablement être téléchargée, ce qui pourrait augmenter les temps de chargement.
La clé à retenir ici est que si vous allez utiliser une police premium qui n’est pas largement utilisée, vous devriez probablement compter sur le navigateur de cette personne qui a besoin de la télécharger lorsqu’elle visite votre site Web pour la première fois. Remarque : Si vous utilisez une police Google populaire et l’hébergez localement, comme Roboto, cela ne s’applique pas car le navigateur est assez intelligent pour le détecter dans le cache (qu’il soit chargé depuis Google ou localement depuis votre site).
2. Plus complexe
Nous réalisons que tout le monde n’est pas des gourous de WordPress. Héberger des polices localement demande certainement un peu plus de configuration. Par exemple, un thème WordPress peut appeler automatiquement les polices Google dans leur thème et si vous hébergez des polices localement, vous devrez trouver un moyen de les désactiver de votre site. Cela pourrait impliquer de contacter votre développeur de thème pour obtenir une ligne de code rapide. Cela peut sembler compliqué, mais nous allons essayer de l’expliquer aussi facilement que possible dans le tutoriel ci-dessous.
3. Plus attentif au choix des polices de caractères
Lorsque vous hébergez des polices localement, vous devez choisir les types de polices que vous souhaitez prendre en charge. Si vous ne choisissez que les nouveaux formats, tels que WOFF2, vous risquez de ne pas tenir compte des anciens navigateurs, qui, à leur tour, utiliseront par défaut les anciennes polices Web Safe Fonts. Par exemple, selon CanIUse, IE11, Safari, et certaines versions d’Android Browser pourraient avoir des problèmes avec l’utilisation exclusive des polices Web WOFF2. Donc vous devrez probablement utiliser WOFF + WOFF 2 pour être en sécurité sur toute la ligne. WOFF 2 offre des méthodes de compression beaucoup plus élevées, c’est pourquoi vous devriez utiliser les deux.
Lorsque vous utilisez un service tiers, il est presque impossible de tout gâcher car ils prennent en charge un large éventail de navigateurs prêts à l’emploi. Ainsi, lorsque vous hébergez localement, vous devez faire plus attention à la sélection de votre type de police.
4. Ne le faites pas sans CDN
De nombreux sites utilisent aujourd’hui un CDN comme Cloudflare ou KeyCDN pour accélérer la livraison de leurs ressources. Ceci est important car cela réduit les temps de latence et les temps de recherche DNS de manière générale. Si vous utilisez des polices localement, et n’utilisez pas de CDN, vous pourriez, en fait, ralentir votre site plutôt que d’utiliser un service tel que Google Fonts ou Adobe Fonts. La raison en est que tous ces services utilisent un CDN pour livrer leurs polices. Nous vous recommandons donc fortement, à moins que vous n’ayez que du trafic vers une petite zone géographique, d’utiliser toujours un CDN si vous hébergez vos propres polices. Et bien sûr, assurez-vous d’utiliser un fournisseur CDN qui prend en charge le HTTP/2.
Le CDN Kinsta supporte HTTP/2 et la bande passante gratuite est incluse pour tous les clients. 🚀
Comment héberger des polices localement dans WordPress
Maintenant, c’est l’heure de la partie amusante ! Hébergement de vos polices localement dans WordPress. Nous passons en revue deux options différentes ci-dessous, l’une est avec une police premium que nous avons achetée, et la seconde est en fait de prendre une police Google et de l’héberger localement. Dans ce tutoriel, nous utilisons une nouvelle installation de WordPress avec le thème Twenty Seventeen installé.
1. Comment héberger des polices Premium localement
Pour l’hébergement local d’une police premium, nous avons choisi d’aller avec Fontspring et la nouvelle police Proxima Soft sortie en janvier 2017. Proxima Nova Soft, créé par Mark Simonson, est une version plus récente de la police originale Proxima Nova. Nous avons choisi Fontspring parce qu’ils n’ont pas besoin de scripts de suivi tiers, et la police est un achat unique qui peut être utilisé sur un nombre illimité de sites. Soyez très prudent lorsque vous achetez des polices, car beaucoup d’entre elles nécessitent des scripts de suivi tiers, ce qui, dans une certaine mesure, va à l’encontre de l’objectif de les héberger localement.
Nous avons acheté les polices Proxima Soft Regular et Proxima Soft Bold. Généralement, une police de caractères normale et en gras est suffisante pour la plupart des sites. Selon votre site, vous devrez peut-être aussi obtenir une version en italique et semi gras. Note : Nous n’avons pas d’affiliation avec Fontspring, nous pensons simplement qu’ils font bien l’achat de polices premium et de licence !
Étape 1
Après avoir acheté vos polices, vous recevrez un email avec un lien vers les fichiers de polices.
Étape 2
Chaque version de police, telle que bold et regular, aura ses propres types de police, tels que WOFF2, WOFF, TTF, etc. Dans cet exemple, nous allons simplement utiliser les versions WOFF et WOFF2 de bold et bold regular, ce qui assure un support complet des navigateurs modernes.
Étape 3
Nous prenons les fichiers de polices et les téléchargeons via FTP sur notre site WordPress dans un dossier que nous avons créé et appelé « fonts ». Dans cet exemple, nous utilisons un CDN pour toutes nos ressources, ainsi que le plugin CDN Enabler gratuit de l’équipe KeyCDN. Ce plugin copie automatiquement les polices que nous venons de télécharger sur notre CDN. Même si nous disons les héberger localement, un CDN fait toujours référence à vos ressources locales. L’important, c’est que vous servez tous vos ressources à partir du même emplacement, sans faire référence à plusieurs domaines (hôtes).
Étape 4
Vous aurez besoin de référencer vos nouvelles polices en CSS sur votre site WordPress. Beaucoup de thèmes ont un panneau CSS personnalisé de nos jours, ou vous pouvez utiliser un plugin gratuit comme Simple Custom CSS et JS. Nous insérerons le code suivant, en faisant référence à notre URL CDN.
@font-face {
font-family: 'proxima_softregular';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_softbold';
src: url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff2') format('woff2'),
url('https://cdn.wpdev.ink/fonts/proximasoft-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}Vous devrez également mettre à jour vos styles pour pointer vers la nouvelle famille de polices. Voici un exemple du code que nous avons utilisé sur le thème Twenty Seventeen.
body {font-family: 'proxima_softregular', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}Voici une capture d’écran du plugin Simple Custom CSS et JS.
Étape 5
Si votre thème WordPress comporte déjà des polices Google intégrées, vous devrez vous assurer de les désactiver. Sinon, il se peut que vous chargiez à la fois vos polices locales et les polices Google. Puisque nous utilisons le thème Twenty Seventeen dans ce tutoriel, nous utilisons le plugin gratuit Disable Google Fonts. Cela ne fonctionne que pour les thèmes par défaut dans WordPress. Pour la plupart des thèmes, vous aurez probablement besoin de contacter le développeur et ils peuvent rapidement fournir une fonction pour désactiver les polices Google. Ou vérifiez leur documentation, il s’agit généralement d’un réglage très rapide. Certains thèmes peuvent même avoir une option pour les activer ou les désactiver en back-end.
Et c’est tout ! Voici une capture d’écran avec notre nouveau chargement des polices Proxima Soft pour nos polices et en-têtes de corps sur le thème Twenty Seventeen.
Et voici une capture d’écran de nos requêtes HTTP. Comme vous pouvez le voir, nous n’avons que 2 requêtes pour les polices WOFF2, au lieu des 4 requêtes de Google que nous avons montrées précédemment. Nous avons aussi les polices WOFF sur le site, mais comme Chrome supporte WOFF2, elles sont choisies à la place. Si nous étions allés sur le site avec IE 11 par exemple, les polices WOFF auraient été chargées à la place.
2. Comment héberger des polices Google localement
La deuxième façon d’héberger les polices localement est d’utiliser une police que vous aimez déjà sur Google Fonts et de la déplacer simplement sur votre serveur ou CDN. Open Sans est connu pour être très léger et très rapide. Nous l’utiliserons donc dans notre exemple.
Étape 1
La meilleure façon de récupérer les polices Google est d’utiliser l’outil google-webfonts-helper gratuit, que nous utilisons pour ce tutoriel. Vous pouvez également consulter le projet Font Face Observer. La première chose que vous devrez faire est de rechercher la police Google que vous voulez et de sélectionner les styles. Nous choisissons à nouveau les styles de police Regular et Bold (700).
Étape 2
Ensuite, vous devrez choisir le support de navigateur que vous souhaitez. Les navigateurs modernes vous donneront les polices WOFF et WOFF2, ce que nous voulons. Le meilleur support vous donne WOFF, WOFF2, EOT, TTF, et SVG. Comme vous pouvez le voir, il vous donne le code que vous pouvez copier dans votre presse-papiers, ainsi que le zip de téléchargement contenant les polices.
Le reste des instructions est alors très similaire à notre exemple de polices premium ci-dessus.
Étape 3
Nous prenons les fichiers de polices et les téléchargeons via FTP sur notre site WordPress dans un dossier que nous avons créé et appelé « fonts ». Dans cet exemple, nous utilisons un CDN pour toutes nos ressources, ainsi que le plugin CDN Enabler gratuit de l’équipe KeyCDN. Ce plugin copie automatiquement les polices que nous venons de télécharger sur notre CDN. Même si nous disons les héberger localement, un CDN fait toujours référence à vos ressources locales. L’important, c’est que vous servez toutes vos ressources à partir du même emplacement, sans faire référence à plusieurs domaines (hébergeurs).
Étape 4
Vous aurez besoin de référencer vos nouvelles polices en CSS sur votre site WordPress. Beaucoup de thèmes ont un panneau CSS personnalisé de nos jours, ou vous pouvez utiliser un plugin gratuit comme Simple Custom CSS et JS. Nous insérerons le code suivant, en faisant référence à notre URL CDN.
/* open-sans-regular - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* open-sans-700 - latin */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'),
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('https://cdn.wpdev.ink/fonts/open-sans-v13-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}Vous devrez également mettre à jour vos styles pour pointer vers la nouvelle famille de polices. Voici un exemple du code que nous avons utilisé sur le thème Twenty Seventeen.
body {font-family: 'Open Sans', Arial, sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}Voici une capture d’écran du plugin Simple Custom CSS et JS.
Étape 5
Si votre thème WordPress comporte déjà des polices Google intégrées, vous devrez vous assurer de les désactiver. Cela peut paraître un peu ironique, puisque nous utilisons des polices Google. Mais la raison pour laquelle vous devez le faire est pour désactiver les requêtes externes. Puisque nous utilisons le thème Twenty Seventeen dans ce tutoriel, nous utilisons le plugin gratuit Disable Google Fonts. Cela ne fonctionne que pour les thèmes par défaut dans WordPress. Pour la plupart des thèmes, vous aurez probablement besoin de contacter le développeur et ils peuvent rapidement fournir une fonction pour désactiver les polices Google. Ou vérifiez leur documentation, il s’agit généralement d’un réglage très rapide. Certains thèmes peuvent même avoir une option pour les activer ou les désactiver en back-end.
Et c’est tout ! Voici une capture d’écran de notre nouvelle police Google Open Sans qui se charge pour le corps et les en-têtes sur le thème Twenty Seventeen.
Et voici une capture d’écran de nos requêtes. Comme vous pouvez le voir, nous n’avons que 2 requêtes pour les polices WOFF2, au lieu des 4 requêtes de Google que nous avons montrées précédemment. Nous avons aussi les polices WOFF sur le site, mais comme Chrome supporte WOFF2, elles sont tirées à la place. Si nous étions allés sur le site avec IE 11 par exemple, les polices WOFF auraient été chargées à la place.
Résumé
Et c’est tout ! Vous savez maintenant comment héberger des polices localement à partir d’une boutique de polices premium ou déplacer des polices Google sur votre propre serveur et/ou CDN. Vous pouvez donc maintenant jeter un coup d’œil à toutes les belles polices de caractères qui existent, sans vous soucier autant de la façon dont elles affectent les performances. Ils pourraient tout simplement donner à votre site WordPress le lifting dont il avait besoin (assurez-vous de lire notre guide détaillé sur les polices WordPress) ! Et si vous êtes curieux de savoir pourquoi nous n’utilisons pas de polices localement, c’est parce que nous travaillons à la conception d’un nouveau site Web, ce qui pourrait se produire dans un proche avenir. Un excellent article alternatif pour les police système est System Font.
Nous aimerions connaître votre configuration. Utilisez-vous un service tiers pour charger vos polices Web et avez-vous déjà essayé l’hébergement local ?
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire