Cet article pr\u00e9sente les polices Web et explore les m\u00e9thodes et outils que vous pouvez utiliser pour am\u00e9liorer l’optimisation de vos polices Web dans WordPress.<\/p>\n
- \n
- Que sont les polices Web ?<\/a><\/li>\n
- H\u00e9bergement et livraison de polices Web<\/a><\/li>\n
- Optimiser les polices du service de polices Web<\/a><\/li>\n
- Utiliser des polices auto-h\u00e9berg\u00e9es avec WordPress<\/a><\/li>\n
- Optimiser les polices Web avec CSS Inlining<\/a><\/li>\n
- Les polices variables arrivent<\/a><\/li>\n<\/ul>\n
Que sont les polices Web ?<\/h2>\n
Avant de parler de la fa\u00e7on d’optimiser la livraison des polices Web, je veux m’assurer que nous sommes sur la m\u00eame longueur d’onde. Lorsqu’il s’agit de sites, il existe deux types basiques de polices :<\/p>\n
- \n
- Les polices s\u00e9curis\u00e9es pour le Web<\/strong> (web-safe) sont des polices pr\u00e9install\u00e9es sur un p\u00e9riph\u00e9rique. Les polices courantes comme Arial, Times New Roman et Courier New, ainsi que les familles de polices g\u00e9n\u00e9riques comme serif, sans-serif et monospace sont des polices s\u00e9curis\u00e9es pour le Web.<\/li>\n
- Les polices Web<\/strong> sont des polices qui ne sont pas pr\u00e9install\u00e9es sur un appareil et qui doivent \u00eatre t\u00e9l\u00e9charg\u00e9es par le navigateur de l’utilisateur avant d’\u00eatre affich\u00e9es.<\/li>\n<\/ul>\n
Essentiellement, les polices Web doivent \u00eatre t\u00e9l\u00e9charg\u00e9es par le navigateur du visiteur d’un site, tandis que les polices s\u00e9curis\u00e9es pour le Web ne n\u00e9cessitent pas de t\u00e9l\u00e9chargement suppl\u00e9mentaire. Par cons\u00e9quent, les sites qui utilisent des polices Web doivent r\u00e9fl\u00e9chir \u00e0 l’impact des ressources de polices suppl\u00e9mentaires sur la vitesse de chargement du site.<\/p>\n
H\u00e9bergement et livraison de polices Web<\/h2>\n
Une fois que vous avez d\u00e9cid\u00e9 d’utiliser des polices Web, vous devez d\u00e9cider comment h\u00e9berger les ressources de polices. Il y a deux options disponibles pour h\u00e9berger les polices web :<\/p>\n
- \n
- Auto-h\u00e9bergement<\/strong> : Les ressources de polices sont h\u00e9berg\u00e9es sur votre propre serveur avec le reste des fichiers de votre site.<\/li>\n
- H\u00e9bergement par des tiers<\/strong> : Les ressources de polices sont h\u00e9berg\u00e9es par un service de polices tel que Google Fonts ou Adobe Fonts.<\/li>\n<\/ul>\n
L’utilisation d’un service de polices tiers tel que Google Fonts<\/a> est beaucoup plus courante et constitue un moyen plus simple d’utiliser les polices Web. Cependant, certains d\u00e9veloppeurs pr\u00e9f\u00e8rent \u00e9viter de d\u00e9pendre de ressources h\u00e9berg\u00e9es \u00e0 l’ext\u00e9rieur pour des raisons de performance ou de s\u00e9curit\u00e9,<\/a> et dans ce cas, l’auto-h\u00e9bergement est une option. Vous pouvez consulter notre tutoriel d\u00e9taill\u00e9 sur la fa\u00e7on d’h\u00e9berger des polices locallement dans WordPress<\/a>. En r\u00e9alit\u00e9, \u00e0 moins que vous n’ayez un probl\u00e8me de s\u00e9curit\u00e9 important ou que vous ne disposiez des prouesses techniques et de la puissance d’un serveur pour fournir des ressources de polices plus rapidement que Google ou Adobe, il est probablement plus logique d’utiliser un service de polices pour h\u00e9berger et fournir des polices Web.<\/p>\n
L’optimisation des polices Web est un sujet complexe et il existe diff\u00e9rentes fa\u00e7ons d’optimiser la livraison des polices<\/a>. L’option qui convient le mieux \u00e0 votre site d\u00e9pendra d’une vari\u00e9t\u00e9 de facteurs, notamment la vitesse de votre serveur et de votre r\u00e9seau, la taille du CSS de<\/a> votre site<\/a> et vos propres capacit\u00e9s techniques.<\/p>\n
![\"Polices](\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2016\/06\/polices-google.png\")
Polices Google<\/figcaption><\/figure>\n Optimiser les polices Web du service de polices de caract\u00e8res<\/h2>\n
Nous allons commencer par cette option parce que c’est la plus simple et la plus courante. Bien qu’Adobe Fonts soit populaire parmi les d\u00e9veloppeurs professionnels, Google Fonts est la source la plus commune de polices tierces. Voici notre liste des meilleures polices Google<\/a>. C’est gratuit et si populaire que de nombreux utilisateurs n’ont pas besoin de t\u00e9l\u00e9charger de nombreuses ressources de polices Google Fonts parce que les polices sont d\u00e9j\u00e0 stock\u00e9es dans le cache de leur navigateur.<\/p>\n
L’ajout des polices Google \u00e0 votre site WordPress est facile. Pour une impl\u00e9mentation la plus l\u00e9g\u00e8re possible, ajoutez les polices directement dans le fichier header.php de<\/i> votre th\u00e8me en utilisant un \u00e9l\u00e9ment HTML
link<\/code> ou dans le fichier functions.php avecwp_enqueue_script()<\/code>.<\/p>\nUne fois vos polices ajout\u00e9es dans header.php<\/i> ou functions.php<\/i>, appliquez-les avec des r\u00e8gles CSS personnalis\u00e9es.<\/p>\n
Gardez \u00e0 l’esprit que vous devrez utiliser un th\u00e8me enfant<\/a> si vous apportez des modifications aux fichiers de th\u00e8me. Sinon, vous perdrez tous vos changements la prochaine fois que votre th\u00e8me sera mis \u00e0 jour.<\/p>\n
Si vous pr\u00e9f\u00e9rez ne pas plonger dans les fichiers de votre th\u00e8me, il existe plusieurs plugins WordPress que vous pouvez utiliser pour ajouter des polices Google \u00e0 votre site.<\/p>\n
Plugin Google Fonts for WordPress<\/h3>\n
Google Fonts for WordPress<\/a> est l’un des plugins les plus faciles \u00e0 utiliser parmi les plugins de polices disponibles, et est livr\u00e9e avec un support exceptionnel du d\u00e9veloppeur<\/strong>. Il n’y a pas de pages de r\u00e9glages complexes, tout se fait via l\u2019outil de personnalisation et les changements sont refl\u00e9t\u00e9s instantan\u00e9ment dans la pr\u00e9visualisation.<\/p>\n
![\"Extension](\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2016\/06\/extension-google-fonts-wordpress.png\")
<\/a>Plugin Google Fonts for WordPress<\/figcaption><\/figure>\n Le panneau \u00ab\u00a0R\u00e9glages basiques\u00a0\u00bb vous permet de choisir une police de caract\u00e8res unique pour l’ensemble de votre site. Ou pour le contr\u00f4le de la granularit\u00e9 fine, vous pouvez acc\u00e9der au panneau \u00ab\u00a0R\u00e9glages avanc\u00e9s\u00a0\u00bb et personnaliser chaque \u00e9l\u00e9ment individuellement. Les r\u00e9glages avanc\u00e9s incluent tout, des types de sous-titres individuels (H1, H2, H3, etc.) jusqu’au contenu du pied de page.<\/p>\n
Google Fonts for WordPress est fr\u00e9quemment mis \u00e0 jour, ce qui signifie que vous avez acc\u00e8s \u00e0 plus de 870 belles polices Google. Avec plus de 140 \u00e9valuations cinq \u00e9toiles et la plupart des demandes de support r\u00e9solues en 24 heures, ce plugin est un excellent choix pour g\u00e9rer votre typographie.<\/p>\n
Plugin Easy Google Fonts<\/h3>\n
Une autre option populaire pour ajouter des polices Google \u00e0 WordPress est Easy Google Fonts<\/a>. Avec ce plugin, il est facile de configurer les styles de police pour chaque \u00e9l\u00e9ment de texte et de cr\u00e9er des s\u00e9lecteurs personnalis\u00e9s pour des \u00e9l\u00e9ments sp\u00e9ciaux. Les styles de police sont assign\u00e9s \u00e0 chaque \u00e9l\u00e9ment et s\u00e9lecteur personnalis\u00e9 dans l\u2019outil de personnalisation. Par cons\u00e9quent, vous obtenez un aper\u00e7u en direct de chaque changement au fur et \u00e0 mesure que vous le faites.<\/p>\n
![\"Extension](\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2016\/06\/extension-wordpress-easy-google-fonts.png\")
<\/a>Plugin WordPress Easy Google Fonts<\/figcaption><\/figure>\n Optimiser les polices Google<\/h3>\n
Toutes les polices Google sont compress\u00e9es et livr\u00e9es via le CDN de Google, ce qui permet une livraison la plus rapide possible. M\u00eame si Google Fonts inclut ces optimisations int\u00e9gr\u00e9es, cela vaut quand m\u00eame la peine de faire ce que vous pouvez pour acc\u00e9l\u00e9rer la livraison des polices en \u00e9tant s\u00e9lectif<\/strong>.<\/p>\n
Lorsque vous s\u00e9lectionnez Google Fonts, ne s\u00e9lectionnez pas tous les styles et jeux de caract\u00e8res disponibles juste au cas o\u00f9<\/i>. R\u00e9fl\u00e9chissez bien aux styles et aux jeux de caract\u00e8res dont vous aurez r\u00e9ellement besoin et ajoutez seulement ces styles et sous-ensembles sp\u00e9cifiques. Gardez \u00e0 l’esprit que vous n’avez pas \u00e0 s\u00e9lectionner toutes les variantes de police italique et grasse. Les navigateurs se rapprocheront de ces styles si la police appropri\u00e9e n’est pas disponible.<\/p>\n
De nombreux sites utilisent une police d’affichage unique pour styliser le titre du site. Cependant, cela signifie que vous avez ajout\u00e9 un fichier de police suppl\u00e9mentaire qui doit \u00eatre t\u00e9l\u00e9charg\u00e9. Minimisez l’impact de ce style de police suppl\u00e9mentaire en t\u00e9l\u00e9chargeant uniquement les caract\u00e8res sp\u00e9cifiques utilis\u00e9s dans votre titre. Vous pouvez le faire en ajoutant
&text=,<\/code> suivi des lettres sp\u00e9cifiques que vous souhaitez t\u00e9l\u00e9charger, \u00e0 la fin de l’URL des polices Google.<\/p>\nPar exemple, si nous voulions charger le mot Kinsta<\/i> en utilisant Bungee Shade<\/a>, nous pourrions le faire avec le lien suivant :<\/p>\n
<link href='\/\/fonts.googleapis.com\/css?family=Bungee+Shade&text=Kinsta' rel='stylesheet'><\/code><\/p>\nNotez l’ajout de
&text=Kinsta<\/code> \u00e0 l’\u00e9l\u00e9ment de lien. Ce que cet ajout fait, c’est dire au CDN de Google Fonts de ne d\u00e9livrer que la lettre majuscule K, et les lettres minuscules i, n, s, t, et a.<\/p>\nUtiliser des polices auto-h\u00e9berg\u00e9es avec WordPress<\/h2>\n
L’auto-h\u00e9bergement des polices Web est la meilleure option si vous utilisez des polices qui ne sont pas disponibles \u00e0 partir d’un service de polices, si vous \u00eates capable de fournir des polices plus rapidement qu’un service de polices, ou si vous souhaitez supprimer toutes les d\u00e9pendances sur les ressources h\u00e9berg\u00e9es \u00e0 l’ext\u00e9rieur.<\/p>\n
![\"Extension](\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2016\/06\/extension-use-any-font.png\")
<\/a>Plugin Use Any Font<\/figcaption><\/figure>\n Cela n’est pas si difficile d’ajouter manuellement des polices auto-h\u00e9berg\u00e9es \u00e0 WordPress :<\/p>\n
- \n
- T\u00e9l\u00e9versez les fichiers de polices sur votre site.<\/li>\n
- Ajoutez une r\u00e8gle
@font-face<\/code> au fichier style.css de<\/i> votre th\u00e8me pour chaque police charg\u00e9e.<\/li>\n- Appliquez les polices \u00e0 l’aide de CSS personnalis\u00e9s.<\/li>\n<\/ul>\n
Cependant, si vous souhaitez rendre les choses un peu plus faciles, Use Any Font<\/a> est un plugin qui vous permettra de t\u00e9l\u00e9verser des polices et de les affecter \u00e0 des \u00e9l\u00e9ments HTML directement depuis le tableau de bord WordPress. Vous pouvez utiliser la version gratuite de Use Any Font pour t\u00e9l\u00e9verser un seul fichier de polices. Cependant, si vous donnez 10$ ou plus, vous pouvez t\u00e9l\u00e9verser un nombre illimit\u00e9 de polices.<\/p>\n
Optimiser les polices auto-h\u00e9berg\u00e9es<\/h3>\n
Lorsque vous utilisez des polices auto-h\u00e9berg\u00e9es, il est facile de mal faire les choses, ce qui finit par nuire \u00e0 la vitesse de chargement de votre site. Pour \u00e9viter cette erreur, suivez ces directives.<\/p>\n
Tout d’abord, gardez vos ressources de polices aussi l\u00e9g\u00e8res que possible. Lorsque vous cr\u00e9ez une ressource de polices ou ajoutez des polices \u00e0 votre site, n’incluez que les styles et les jeux de caract\u00e8res que vous pr\u00e9voyez d’utiliser.<\/p>\n
Deuxi\u00e8mement, fournissez les polices dans quatre formats : woff2, woff, ttf, et eot. Lorsque vous ajoutez ces polices \u00e0 votre CSS avec une r\u00e8gle
@font-face<\/code>, incluez-les dans cet ordre<\/i>. Cela garantira que les navigateurs choisissent le format le plus l\u00e9ger et le plus rapide qu’ils sont capables d\u2019utiliser.<\/p>\nTroisi\u00e8mement, envisagez d’utiliser le sous-r\u00e9glage de la plage unicode<\/a> pour limiter les ressources de polices t\u00e9l\u00e9charg\u00e9es aux seuls caract\u00e8res que vous allez utiliser.<\/p>\n
Optimiser les polices Web avec CSS Inlining<\/h2>\n
Si vous avec une tendance technique et que vous vous souciez de chaque milliseconde, vous pouvez r\u00e9duire la vitesse de chargement des pages de votre site, l’inlining est une option \u00e0 consid\u00e9rer.<\/p>\n
L’id\u00e9e de base est d’utiliser l’encodage base64 pour int\u00e9grer des polices en ligne dans une feuille de style CSS. Cela r\u00e9duit la n\u00e9cessit\u00e9 pour le navigateur d’un visiteur de t\u00e9l\u00e9charger et de traiter les ressources de polices, mais cela signifie que votre site r\u00e9cup\u00e8re un fichier CSS assez volumineux.<\/p>\n
Les avis sont partag\u00e9s sur la question<\/a> de savoir si les polices en ligne am\u00e9lioreront la vitesse de chargement des pages de votre site. La raison pour laquelle certains sites prennent cette route est pour les avantages de la mise en cache du navigateur. Une fois que la ressource de police a \u00e9t\u00e9 t\u00e9l\u00e9charg\u00e9e, les pages suivantes qui utilisent la m\u00eame ressource seront affich\u00e9es plus rapidement. Par cons\u00e9quent, cette strat\u00e9gie vaut la peine d’\u00eatre consid\u00e9r\u00e9e si votre site voit beaucoup de visiteurs r\u00e9guliers et plusieurs pages vues par session.<\/p>\n
![\"localfont\"](\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2016\/06\/localfont-fr.png\")
localFont<\/figcaption><\/figure>\n L’encodage de vos fichiers de polices dans une feuille de style CSS n’est pas difficile. localFont<\/a> est une interface web facile \u00e0 utiliser que vous pouvez utiliser pour convertir les fichiers de polices woff<\/i>, woff2,<\/i> et ttf<\/i> en CSS en ligne. L’outil fournit m\u00eame du JavaScript qui v\u00e9rifiera le cache du navigateur de chaque utilisateur pour le fichier de police CSS avant de le t\u00e9l\u00e9charger pour la deuxi\u00e8me fois. Vous pouvez en savoir plus sur localFont en lisant Introduction \u00e0 localFont<\/a>, dans lequel le d\u00e9veloppeur Jaime Caballero explique le concept et l’histoire de l’outil.<\/p>\n
Une technique suppl\u00e9mentaire d’optimisation des polices Web pour les sites l\u00e9gers<\/h3>\n
Si vous \u00eates pass\u00e9 des fichiers de polices auto-h\u00e9berg\u00e9s aux polices CSS en ligne, l’\u00e9tape logique suivante est d’envisager d’int\u00e9grer le CSS directement dans le HTML de votre site. Avec cette strat\u00e9gie en place, les ressources de polices sont incluses dans le document HTML du site, ce qui \u00e9limine le besoin d’aller-retour sur le serveur pour r\u00e9cup\u00e9rer les ressources de polices. Cependant, cette tactique \u00e9limine \u00e9galement l’avantage de stocker les ressources de polices dans le cache du navigateur d’un utilisateur puisque les polices sont cod\u00e9es directement dans le HTML du site et incluses avec chaque chargement de page.<\/p>\n
Si vous ins\u00e9rez une police CSS directement dans le HTML de votre site, n’ins\u00e9rez qu’une seule famille de polices, un seul style et un seul jeu de caract\u00e8res. Si votre site a besoin de familles de polices, de styles et de jeux de caract\u00e8res suppl\u00e9mentaires, chargez-les s\u00e9par\u00e9ment. Tr\u00e8s franchement, si vous utilisez un site WordPress, \u00e0 moins que vous n’utilisiez un th\u00e8me personnalis\u00e9 qui est intentionnellement minimal, l’int\u00e9gration d’une police CSS en HTML ne va probablement pas am\u00e9liorer les performances globales du site et repr\u00e9sente presque certainement plus de probl\u00e8mes que ce qu’il vaut.<\/p>\n
Les polices variables arrivent<\/h2>\n
Les polices variables<\/a> commencent \u00e9galement \u00e0 devenir populaires et sont support\u00e9es par tous les navigateurs modernes. Celles-ci sont impressionnantes parce qu’elles permettent \u00e0 un fichier de police <\/strong>de se transformer simplement avec des propri\u00e9t\u00e9s diff\u00e9rentes. Cependant, il n’y a pas encore beaucoup de polices gratuites \u00e0 choisir. Cependant, Google a quelques polices variables dans Early Access<\/a>.<\/p>\n
R\u00e9sum\u00e9 et lectures compl\u00e9mentaires<\/h2>\n
L’optimisation des polices Web est un sujet complexe et il est
difficile<\/del> impossible <\/strong>de rendre justice \u00e0 ce sujet en moins de 2000 mots. Si vous voulez en savoir plus sur les strat\u00e9gies d’optimisation des polices web, voici quelques ressources suppl\u00e9mentaires pour vous aider dans votre d\u00e9marche.<\/p>\n- \n
- Options et rapidit\u00e9 des polices Webfont<\/a> par Patrick Sexton.<\/li>\n
- Optimisation de la police Web<\/a> par Ilya Grigorik.<\/li>\n
- Motifs de chargement de polices Web<\/a> par Bram Stein.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
Les polices Web sont un \u00e9l\u00e9ment de base de la conception Web moderne et sont utilis\u00e9es par l’\u00e9crasante majorit\u00e9 des sites WordPress. L’optimisation de l’utilisation et …<\/p>\n","protected":false},"author":37,"featured_media":29790,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[71,33],"topic":[],"class_list":["post-29778","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-polices-google","tag-wordpress"],"yoast_head":"\n
Un guide sur l'optimisation des polices Web dans WordPress<\/title>\n<meta name=\"description\" content=\"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Un guide sur l'optimisation des polices Web dans WordPress\" \/>\n<meta property=\"og:description\" content=\"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/jonpenland\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-05T12:09:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-10-14T12:35:07+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/trello-media.png\" \/>\n\t<meta property=\"og:image:width\" content=\"499\" \/>\n\t<meta property=\"og:image:height\" content=\"123\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jon Penland\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/staging.kinsta.site\/wp-content\/uploads\/2016\/06\/web-font-optimization-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@jonrichpen\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jon Penland\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\"},\"author\":{\"name\":\"Jon Penland\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#\/schema\/person\/ab6e959e5cabc5b1a3792c18ce5da394\"},\"headline\":\"Un guide sur l’optimisation des polices Web dans WordPress\",\"datePublished\":\"2019-08-05T12:09:27+00:00\",\"dateModified\":\"2020-10-14T12:35:07+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\"},\"wordCount\":2610,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png\",\"keywords\":[\"polices Google\",\"WordPress\"],\"articleSection\":[\"Tutoriels sur la performance WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\",\"url\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\",\"name\":\"Un guide sur l'optimisation des polices Web dans WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png\",\"datePublished\":\"2019-08-05T12:09:27+00:00\",\"dateModified\":\"2020-10-14T12:35:07+00:00\",\"description\":\"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.\",\"breadcrumb\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage\",\"url\":\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png\",\"contentUrl\":\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png\",\"width\":1460,\"height\":730,\"caption\":\"Un guide sur l'optimisation des polices Web dans WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/staging.kinsta.site\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Un guide sur l’optimisation des polices Web dans WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#website\",\"url\":\"https:\/\/staging.kinsta.site\/fr\/\",\"name\":\"Kinsta\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/staging.kinsta.site\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/staging.kinsta.site\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2018\/05\/kinsta.png\",\"contentUrl\":\"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2018\/05\/kinsta.png\",\"width\":580,\"height\":580,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#\/schema\/person\/ab6e959e5cabc5b1a3792c18ce5da394\",\"name\":\"Jon Penland\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/staging.kinsta.site\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e626085c340d1b255a4522cc8d6a184855d9ba19b7ec0a6ead549acb7e15c5ef?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e626085c340d1b255a4522cc8d6a184855d9ba19b7ec0a6ead549acb7e15c5ef?s=96&d=mm&r=g\",\"caption\":\"Jon Penland\"},\"description\":\"Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.\",\"sameAs\":[\"http:\/\/www.jonpenland.com\",\"https:\/\/www.facebook.com\/jonpenland\",\"https:\/\/www.linkedin.com\/in\/jonpenland\",\"https:\/\/x.com\/jonrichpen\"],\"url\":\"https:\/\/staging.kinsta.site\/fr\/blog\/author\/jonpenland\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Un guide sur l'optimisation des polices Web dans WordPress","description":"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/","og_locale":"fr_FR","og_type":"article","og_title":"Un guide sur l'optimisation des polices Web dans WordPress","og_description":"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.","og_url":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/","og_site_name":"Kinsta","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_author":"https:\/\/www.facebook.com\/jonpenland","article_published_time":"2019-08-05T12:09:27+00:00","article_modified_time":"2020-10-14T12:35:07+00:00","og_image":[{"width":499,"height":123,"url":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/trello-media.png","type":"image\/png"}],"author":"Jon Penland","twitter_card":"summary_large_image","twitter_description":"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.","twitter_image":"https:\/\/staging.kinsta.site\/wp-content\/uploads\/2016\/06\/web-font-optimization-1.png","twitter_creator":"@jonrichpen","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Jon Penland","Dur\u00e9e de lecture estim\u00e9e":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#article","isPartOf":{"@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/"},"author":{"name":"Jon Penland","@id":"https:\/\/staging.kinsta.site\/fr\/#\/schema\/person\/ab6e959e5cabc5b1a3792c18ce5da394"},"headline":"Un guide sur l’optimisation des polices Web dans WordPress","datePublished":"2019-08-05T12:09:27+00:00","dateModified":"2020-10-14T12:35:07+00:00","mainEntityOfPage":{"@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/"},"wordCount":2610,"commentCount":0,"publisher":{"@id":"https:\/\/staging.kinsta.site\/fr\/#organization"},"image":{"@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png","keywords":["polices Google","WordPress"],"articleSection":["Tutoriels sur la performance WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/","url":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/","name":"Un guide sur l'optimisation des polices Web dans WordPress","isPartOf":{"@id":"https:\/\/staging.kinsta.site\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage"},"image":{"@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage"},"thumbnailUrl":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png","datePublished":"2019-08-05T12:09:27+00:00","dateModified":"2020-10-14T12:35:07+00:00","description":"L'optimisation des polices Web est plus facile que vous ne le pensez. Dans cet article, nous vous montrons comment utiliser les plugins WordPress de Google pour rendre votre site plus rapide.","breadcrumb":{"@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#primaryimage","url":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png","contentUrl":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2019\/08\/guide-optimisation-polices-web.png","width":1460,"height":730,"caption":"Un guide sur l'optimisation des polices Web dans WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/staging.kinsta.site\/fr\/blog\/optimisation-polices-web\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/staging.kinsta.site\/fr\/"},{"@type":"ListItem","position":2,"name":"Un guide sur l’optimisation des polices Web dans WordPress"}]},{"@type":"WebSite","@id":"https:\/\/staging.kinsta.site\/fr\/#website","url":"https:\/\/staging.kinsta.site\/fr\/","name":"Kinsta","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/staging.kinsta.site\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/staging.kinsta.site\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/staging.kinsta.site\/fr\/#organization","name":"Kinsta","url":"https:\/\/staging.kinsta.site\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/staging.kinsta.site\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2018\/05\/kinsta.png","contentUrl":"https:\/\/staging.kinsta.site\/fr\/wp-content\/uploads\/sites\/4\/2018\/05\/kinsta.png","width":580,"height":580,"caption":"Kinsta"},"image":{"@id":"https:\/\/staging.kinsta.site\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr"]},{"@type":"Person","@id":"https:\/\/staging.kinsta.site\/fr\/#\/schema\/person\/ab6e959e5cabc5b1a3792c18ce5da394","name":"Jon Penland","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/staging.kinsta.site\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e626085c340d1b255a4522cc8d6a184855d9ba19b7ec0a6ead549acb7e15c5ef?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e626085c340d1b255a4522cc8d6a184855d9ba19b7ec0a6ead549acb7e15c5ef?s=96&d=mm&r=g","caption":"Jon Penland"},"description":"Jon is the Chief Operating Officer at Kinsta and is involved with Kinsta's sales, customer service, and technical support teams on a daily basis. Jon's a family man. So when he isn't feverishly tapping the keys of his laptop he's usually helping one of his kids fix a bike or setting up Netflix for an impatient preschooler.","sameAs":["http:\/\/www.jonpenland.com","https:\/\/www.facebook.com\/jonpenland","https:\/\/www.linkedin.com\/in\/jonpenland","https:\/\/x.com\/jonrichpen"],"url":"https:\/\/staging.kinsta.site\/fr\/blog\/author\/jonpenland\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/posts\/29778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/users\/37"}],"replies":[{"embeddable":true,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/comments?post=29778"}],"version-history":[{"count":6,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/posts\/29778\/revisions"}],"predecessor-version":[{"id":42851,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/posts\/29778\/revisions\/42851"}],"alternate":[{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/kinsta\/v1\/posts\/29778\/translations\/fr"},{"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/kinsta\/v1\/posts\/29778\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/media\/29790"}],"wp:attachment":[{"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/media?parent=29778"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/tags?post=29778"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/staging.kinsta.site\/fr\/wp-json\/wp\/v2\/topic?post=29778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}} - Optimisation de la police Web<\/a> par Ilya Grigorik.<\/li>\n
- Appliquez les polices \u00e0 l’aide de CSS personnalis\u00e9s.<\/li>\n<\/ul>\n
- H\u00e9bergement par des tiers<\/strong> : Les ressources de polices sont h\u00e9berg\u00e9es par un service de polices tel que Google Fonts ou Adobe Fonts.<\/li>\n<\/ul>\n
- Les polices Web<\/strong> sont des polices qui ne sont pas pr\u00e9install\u00e9es sur un appareil et qui doivent \u00eatre t\u00e9l\u00e9charg\u00e9es par le navigateur de l’utilisateur avant d’\u00eatre affich\u00e9es.<\/li>\n<\/ul>\n
- H\u00e9bergement et livraison de polices Web<\/a><\/li>\n