{"id":26479,"date":"2019-05-15T10:43:19","date_gmt":"2019-05-15T17:43:19","guid":{"rendered":"https:\/\/kinsta.com\/?p=9545"},"modified":"2024-09-20T13:47:05","modified_gmt":"2024-09-20T12:47:05","slug":"polices-local","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/","title":{"rendered":"Guide d\u00e9taill\u00e9 sur l&rsquo;h\u00e9bergement de polices en local dans WordPress"},"content":{"rendered":"<p>Quand il s&rsquo;agit d&rsquo;h\u00e9berger et d&rsquo;utiliser des polices sur votre site WordPress, il y a beaucoup d&rsquo;options diff\u00e9rentes. Vous pouvez les h\u00e9berger localement, vous pouvez utiliser les polices Google (la plupart des th\u00e8mes ont aujourd&rsquo;hui des polices Google int\u00e9gr\u00e9es), ou utiliser un autre service tiers comme Adobe Fonts. Aujourd&rsquo;hui, nous voulons nous plonger dans quelques raisons pour lesquelles l&rsquo;h\u00e9bergement de polices en local dans WordPress peut \u00eatre avantageux. Non seulement vous pouvez avoir un plus grand choix de <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-html\/\">polices HTML<\/a>, mais il y a parfois des <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-changer-polices-wordpress\/\">avantages de performance<\/a> aussi. Consultez notre tutoriel d\u00e9taill\u00e9 ci-dessous pour savoir comment h\u00e9berger vos polices premium localement ainsi que n&rsquo;importe quelle famille de polices de Google.<\/p>\n<ul>\n<li><a href=\"#web-fonts\">Qu&rsquo;est ce qu&rsquo;une police web ?<\/a><\/li>\n<li><a href=\"#local-fonts-vs-3rd-party\">H\u00e9bergement de polices en local par rapport \u00e0 un service tier<\/a><\/li>\n<li><a href=\"#host-local-fonts-wordpress\">Comment h\u00e9berger des polices localement dans WordPress<\/a><\/li>\n<\/ul>\n<h2 id=\"web-fonts\">Qu\u2019est ce qu\u2019une police Web ?<\/h2>\n<p>Lorsque vous naviguez sur le site WordPress de quelqu&rsquo;un, vous voyez deux types de polices de base, des \u201c<a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-caracteres-web-safe\/\">Web Safe Fonts<\/a>\u201d et des \u201cWeb Fonts\u201d. Ou ils pourraient aussi utiliser un m\u00e9lange des deux.<\/p>\n<p>Lectures sugg\u00e9r\u00e9es : <a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-changer-polices-wordpress\/\">Comment changer la police dans WordPress<\/a>.<\/p>\n<ul style=\"margin-left: 30px\">\n<li><strong>Les Web Safe Fonts<\/strong> sont des polices pr\u00e9install\u00e9es sur un p\u00e9riph\u00e9rique ou un syst\u00e8me d&rsquo;exploitation. Quelques exemples pour le Web comprennent les polices Arial, Times New Roman et Courier New, ainsi que des familles de polices g\u00e9n\u00e9riques comme serif, sans-serif (voir <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-modernes\/\">polices modernes<\/a>) et monospace. Ce sont des polices que vous voyez depuis de nombreuses ann\u00e9es. Voir la <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-caracteres-web-safe\/\">liste compl\u00e8te des Web Safe Fonts<\/a>.<\/li>\n<li><strong>Les Web Fonts <\/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&rsquo;utilisateur avant d&rsquo;\u00eatre affich\u00e9es. Quelques exemples de polices Web incluent les polices Open Sans et Roboto de Google, ainsi que la police populaire Proxima Nova d&rsquo;Adobe Fonts.<\/li>\n<\/ul>\n<p>Google Fonts est un r\u00e9pertoire de polices open source qui est devenu largement utilis\u00e9 au cours des deux derni\u00e8res ann\u00e9es. Selon BuiltWith, plus de 45 % des 10 000 meilleurs sites Web <a href=\"https:\/\/trends.builtwith.com\/widgets\/Google-Font-API\">utilisent les polices Google<\/a> sur leurs sites Web. Et si nous regardons les <a href=\"https:\/\/fonts.google.com\/analytics\">statistiques de Google Fonts<\/a>, nous pouvons voir qu&rsquo;ils ont eu plus de 17 quadrillions de vues. C&rsquo;est beaucoup ! Open Sans et Roboto sont leurs deux familles de polices les plus utilis\u00e9es, avec une croissance \u00e9norme de 77% l&rsquo;ann\u00e9e derni\u00e8re. Nous avons un article sur les meilleures polices Google, assurez-vous d\u2019y jeter un coup d&rsquo;oeil : <a href=\"https:\/\/kinsta.com\/fr\/blog\/meilleures-polices-google-fonts\/\">15 Meilleures polices Google en chiffres<\/a>.<\/p>\n<figure style=\"width: 2597px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/statistiques-polices-google.png\" alt=\"Statistiques sur les polices Google\" width=\"2597\" height=\"1802\"><figcaption class=\"wp-caption-text\">Statistiques sur les polices Google<\/figcaption><\/figure>\n<h2 id=\"local-fonts-vs-3rd-party\">H\u00e9bergement de polices en local par rapport \u00e0 un service tier<\/h2>\n<p>Avant de nous plonger dans le tutoriel, il est important de comprendre quelques-uns des avantages et des inconv\u00e9nients entre l&rsquo;h\u00e9bergement de polices en local et l&rsquo;utilisation d&rsquo;un service tiers. H\u00e9berger les polices localement signifie que vous avez r\u00e9ellement les fichiers de polices sur votre propre serveur (et ou copi\u00e9s sur votre <a href=\"https:\/\/kinsta.com\/fr\/blog\/cdn-wordpress\/\">CDN<\/a> que vous utilisez \u00e9galement 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\u00e9ant un lien vers une ressource externe.<\/p>\n<h3>Avantages des polices locales<\/h3>\n<h4>1. S\u00e9lection plus large des polices de caract\u00e8res<\/h4>\n<p>Un \u00e9norme avantage de l&rsquo;utilisation de polices en local est que vous avez un <strong>choix de polices beaucoup plus large !<\/strong> Bien que les services tiers tels que Google Fonts et Adobe Fonts disposent de grandes biblioth\u00e8ques, ils ne se comparent en aucun cas aux boutiques de polices premium dans lesquelles vous pouvez acheter n&rsquo;importe quelle police web premium que vous souhaitez et l&rsquo;h\u00e9berger sur votre site. En fait, nous utiliserons une police premium dans notre tutoriel ci-dessous, que vous ne pouvez obtenir d&rsquo;aucun service tiers.<\/p>\n<h4>2. Elles pourrait mieux s&rsquo;int\u00e9grer<\/h4>\n<p>En raison de la plus grande s\u00e9lection de polices, les h\u00e9berger localement pourrait vous permettre de choisir une police qui <strong>s&rsquo;int\u00e8gre mieux \u00e0 votre image de marque afin de maintenir une coh\u00e9rence<\/strong> dans l&rsquo;ensemble du site. Tout d\u00e9pend de vos besoins et de vos pr\u00e9f\u00e9rences en mati\u00e8re de conception.<\/p>\n<h4>3. Vous n&rsquo;avez pas besoin de faire appel \u00e0 des services tiers<\/h4>\n<p>Lorsque vous h\u00e9bergez des polices localement, <strong>vous n&rsquo;avez pas besoin de faire appel \u00e0 des services tiers <\/strong>ou \u00e0 leurs serveurs. Des services tels que Adobe Fonts (anciennement Typekit) ont \u00e9t\u00e9 connus pour ralentir votre site, ce qui, \u00e0 son tour, vous donne une mauvaise image. Avoir moins de d\u00e9pendances sur votre site WordPress est toujours mieux.<\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"500\" data-dnt=\"true\">\n<p lang=\"en\" dir=\"ltr\">When <a href=\"https:\/\/t.co\/Kde0okKlP0\">https:\/\/t.co\/Kde0okKlP0<\/a> is down the web stops working <a href=\"https:\/\/twitter.com\/hashtag\/customfontssuck?src=hash&amp;ref_src=twsrc%5Etfw\">#customfontssuck<\/a> <a href=\"https:\/\/twitter.com\/hashtag\/3rdpartyjs?src=hash&amp;ref_src=twsrc%5Etfw\">#3rdpartyjs<\/a><\/p>\n<p>&mdash; Mark \u26d4\ufe0f\ud83d\udc1d (@markhealey) <a href=\"https:\/\/twitter.com\/markhealey\/status\/666484210090176513?ref_src=twsrc%5Etfw\">November 17, 2015<\/a><\/p><\/blockquote>\n<p><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n<h4>4. Contr\u00f4le total de la mise en cache<\/h4>\n<p>En utilisant des polices locales, vous avez un <strong>contr\u00f4le total sur la mise en cache<\/strong> 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&rsquo;il manque un cache validator aux ressources ou qu&rsquo;elles n\u00e9cessitent des <a href=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-expires-headers-wordpress\/\">expires headers<\/a>. Ceux-ci sont fix\u00e9s au niveau du serveur, et lorsqu&rsquo;ils sont sur un serveur tiers, vous n&rsquo;avez aucun contr\u00f4le sur cela.<\/p>\n<figure style=\"width: 1384px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/google-fonts-specify-a-cache-validator.jpg\" alt=\"google fonts specify a cache validator\" width=\"1384\" height=\"273\"><figcaption class=\"wp-caption-text\">Specify a cache validator<\/figcaption><\/figure>\n<h4>5. Moins de requ\u00eates pour des temps de chargement plus rapides<\/h4>\n<p>\u00c9tant donn\u00e9 que les polices Web doivent \u00eatre t\u00e9l\u00e9charg\u00e9es \u00e0 partir d&rsquo;une tierce partie, cela pourrait, \u00e0 son tour, avoir un impact sur la vitesse de chargement de votre site. On ne sait jamais \u00e0 quelle vitesse leurs serveurs fonctionnent \u00e0 un moment donn\u00e9. Vous avez cependant plus de contr\u00f4le sur cela avec votre h\u00e9bergeur WordPress, ou vous devriez ! Adobe Fonts, par exemple, ajoute 2 <a href=\"https:\/\/kinsta.com\/fr\/blog\/reduire-nombre-requetes-http\/\">requ\u00eates HTTP<\/a> externes et encode en base64 tous les formats de polices. Si vous n&rsquo;\u00eates pas familier avec les polices, vous n&rsquo;avez plus besoin de servir tous les formats de polices, vous n&rsquo;avez besoin que de WOFF et WOFF2 (si vous allez pour une compression suppl\u00e9mentaire).<\/p>\n<p>Avec Google Fonts, vous avez \u00e9galement une <a href=\"https:\/\/kinsta.com\/fr\/blog\/reduire-recherches-dns\/\">requ\u00eate DNS<\/a> suppl\u00e9mentaire \u00e0 fonts.googleapis.com pour r\u00e9cup\u00e9rer le fichier CSS. Vous avez ensuite d&rsquo;autres requ\u00eates \u00e0 fonts.gstatic.com pour t\u00e9l\u00e9charger les fichiers de polices. <strong>Lorsque vous h\u00e9bergez localement, toutes les requ\u00eates proviennent du m\u00eame domaine, et vous n&rsquo;aurez probablement pas besoin d&rsquo;un autre fichier CSS<\/strong> car il se trouvera \u00e0 l&rsquo;int\u00e9rieur du fichier CSS de votre th\u00e8me WordPress.<\/p>\n<figure style=\"width: 1680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/requetes-http-polices-google.jpg\" alt=\"Requ\u00eates HTTP des polices Google\" width=\"1680\" height=\"308\"><figcaption class=\"wp-caption-text\">Requ\u00eates HTTP des polices Google<\/figcaption><\/figure>\n<h4>6. Connexion HTTP\/2 simple<\/h4>\n<p>Si vous n&rsquo;avez pas <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/http2\/\">encore pris connaissance des avantages de HTTP\/2<\/a>, nous vous conseillons vivement de le faire. En h\u00e9bergeant vos polices localement, ou sur votre CDN, vous pouvez profiter d&rsquo;une <strong>seule connexion HTTP\/2<\/strong> pour un meilleur parall\u00e9lisme et multiplexage.<\/p>\n<h3>Inconv\u00e9nients des polices locales<\/h3>\n<p>Maintenant que nous avons pass\u00e9 en revue les avantages des polices locales, il y a aussi quelques inconv\u00e9nients \u00e0 prendre en compte.<\/p>\n<h4>1. La police Google pourrait d\u00e9j\u00e0 \u00eatre mise en cache<\/h4>\n<p>Google Fonts utilise son propre CDN, ce qui est rapide, c&rsquo;est Google apr\u00e8s tout. \u00c9tant donn\u00e9 que tant de sites Web utilisent d\u00e9j\u00e0 les polices Google, il se peut fort bien que l&rsquo;utilisateur <strong>ait d\u00e9j\u00e0 la police dans le cache de son navigateur.<\/strong> Si vous utilisez une police premium plus unique, <strong>cela pourrait en fait augmenter le temps de t\u00e9l\u00e9chargement.<\/strong> Par exemple, si quelqu&rsquo;un visite un site Web qui utilise la police Roboto de Google Fonts, celle-ci sera t\u00e9l\u00e9charg\u00e9e dans sa m\u00e9moire cache. S&rsquo;ils visitent ensuite votre site Web, qui utilise \u00e9galement Roboto, la police n&rsquo;aura pas besoin d&rsquo;\u00eatre t\u00e9l\u00e9charg\u00e9e \u00e0 nouveau. Mais si vous utilisez une nouvelle police premium telle que Proxima Soft, elle devra tr\u00e8s probablement \u00eatre t\u00e9l\u00e9charg\u00e9e, ce qui pourrait augmenter les temps de chargement.<\/p>\n<p>La cl\u00e9 \u00e0 retenir ici est que si vous allez utiliser une police premium qui n&rsquo;est pas largement utilis\u00e9e, vous devriez probablement compter sur le navigateur de cette personne qui a besoin de la t\u00e9l\u00e9charger lorsqu&rsquo;elle visite votre site Web pour la premi\u00e8re fois. Remarque : Si vous utilisez une police Google populaire et l&rsquo;h\u00e9bergez localement, comme Roboto, cela ne s&rsquo;applique pas car le navigateur est assez intelligent pour le d\u00e9tecter dans le cache (qu&rsquo;il soit charg\u00e9 depuis Google ou localement depuis votre site).<\/p>\n<h4>2. Plus complexe<\/h4>\n<p>Nous r\u00e9alisons que tout le monde n&rsquo;est pas des gourous de WordPress. H\u00e9berger des polices localement <strong>demande certainement un peu plus de configuration.<\/strong> Par exemple, un th\u00e8me WordPress peut appeler automatiquement les polices Google dans leur th\u00e8me et si vous h\u00e9bergez des polices localement, vous devrez trouver un moyen de les d\u00e9sactiver de votre site. Cela pourrait impliquer de contacter votre d\u00e9veloppeur de th\u00e8me pour obtenir une ligne de code rapide. Cela peut sembler compliqu\u00e9, mais nous allons essayer de l&rsquo;expliquer aussi facilement que possible dans le tutoriel ci-dessous.<\/p>\n<h4>3. Plus attentif au choix des polices de caract\u00e8res<\/h4>\n<p>Lorsque vous h\u00e9bergez 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, \u00e0 leur tour, utiliseront par d\u00e9faut les anciennes polices <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-caracteres-web-safe\/\">Web Safe Fonts<\/a>. Par exemple, <a href=\"http:\/\/caniuse.com\/#feat=woff2\">selon CanIUse<\/a>, IE11, Safari, et certaines versions d&rsquo;Android Browser pourraient avoir des probl\u00e8mes avec l&rsquo;utilisation exclusive des polices Web WOFF2. Donc vous devrez probablement utiliser WOFF + WOFF 2 pour \u00eatre en s\u00e9curit\u00e9 sur toute la ligne. WOFF 2 offre des <a href=\"https:\/\/gist.github.com\/sergejmueller\/cf6b4f2133bcb3e2f64a\">m\u00e9thodes de compression beaucoup plus \u00e9lev\u00e9es<\/a>, c&rsquo;est pourquoi vous devriez utiliser les deux.<\/p>\n<figure style=\"width: 1508px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/support-navigateurs-woff2.jpg\" alt=\"Support des navigateurs pour WOFF2\" width=\"1508\" height=\"781\"><figcaption class=\"wp-caption-text\">Support des navigateurs pour WOFF2<\/figcaption><\/figure>\n<p>Lorsque vous utilisez un service tiers, il est presque impossible de tout g\u00e2cher car ils prennent en charge un large \u00e9ventail de navigateurs pr\u00eats \u00e0 l&#8217;emploi. Ainsi, lorsque vous h\u00e9bergez localement, <strong>vous devez faire plus attention \u00e0 la s\u00e9lection de votre type de police<\/strong>.<\/p>\n<h4>4. Ne le faites pas sans CDN<\/h4>\n<p>De nombreux sites utilisent aujourd&rsquo;hui un CDN comme Cloudflare ou KeyCDN pour acc\u00e9l\u00e9rer la livraison de leurs ressources. Ceci est important car cela <a href=\"https:\/\/kinsta.com\/fr\/blog\/reduire-recherches-dns\/\">r\u00e9duit les temps de latence et les temps de recherche DNS<\/a> de mani\u00e8re g\u00e9n\u00e9rale. Si vous utilisez des polices localement, et n&rsquo;utilisez pas de CDN, vous pourriez, en fait, ralentir votre site plut\u00f4t que d&rsquo;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, \u00e0 moins que vous n&rsquo;ayez que du trafic vers une petite zone g\u00e9ographique, d&rsquo;<strong>utiliser toujours un CDN si vous h\u00e9bergez vos propres polices.<\/strong> Et bien s\u00fbr, assurez-vous d&rsquo;utiliser un <a href=\"https:\/\/en.wikipedia.org\/wiki\/HTTP\/2#Software_and_services_supporting_HTTP.2F2\">fournisseur CDN qui prend en charge le HTTP\/2<\/a>.<\/p>\n<p>Le <a href=\"https:\/\/kinsta.com\/fr\/docs\/hebergement-wordpress\/cdn-wordpress\/kinsta-cdn\/#kinstas-cdn\">CDN Kinsta<\/a> supporte HTTP\/2 et la bande passante gratuite est incluse pour tous les clients. \ud83d\ude80<\/p>\n<h2 id=\"host-local-fonts-wordpress\">Comment h\u00e9berger des polices localement dans WordPress<\/h2>\n<p>Maintenant, c&rsquo;est l&rsquo;heure de la partie amusante ! H\u00e9bergement de vos polices localement dans WordPress. Nous passons en revue deux options diff\u00e9rentes ci-dessous, l&rsquo;une est avec une police premium que nous avons achet\u00e9e, et la seconde est en fait de prendre une police Google et de l&rsquo;h\u00e9berger localement. Dans ce tutoriel, nous utilisons une nouvelle installation de WordPress avec le th\u00e8me Twenty Seventeen install\u00e9.<\/p>\n<ul style=\"margin-left: 30px\">\n<li><a href=\"#host-fonts-locally\">Comment h\u00e9berger des polices Premium localement<\/a><\/li>\n<li><a href=\"#host-google-fonts-locally\">Comment h\u00e9berger des polices Google localement<\/a><\/li>\n<\/ul>\n<h3><a id=\"host-fonts-locally\"><\/a>1. Comment h\u00e9berger des polices Premium localement<\/h3>\n<p>Pour l&rsquo;h\u00e9bergement local d&rsquo;une police premium, nous avons choisi d&rsquo;aller avec Fontspring et la nouvelle <a href=\"https:\/\/www.fontspring.com\/fonts\/mark-simonson-studio\/proxima-soft-standard\">police Proxima Soft<\/a> sortie en janvier 2017. Proxima Nova Soft, cr\u00e9\u00e9 par Mark Simonson, est une version plus r\u00e9cente de la police originale Proxima Nova. Nous avons choisi Fontspring parce qu&rsquo;ils n&rsquo;ont pas besoin de scripts de suivi tiers, et la police est un achat unique qui peut \u00eatre utilis\u00e9 sur un nombre illimit\u00e9 de sites. Soyez tr\u00e8s prudent lorsque vous achetez des polices, car beaucoup d&rsquo;entre elles n\u00e9cessitent des scripts de suivi tiers, ce qui, dans une certaine mesure, va \u00e0 l&rsquo;encontre de l&rsquo;objectif de les h\u00e9berger localement.<\/p>\n<figure style=\"width: 1291px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/fontspring-logo.jpg\" alt=\"fontspring\" width=\"1291\" height=\"153\"><figcaption class=\"wp-caption-text\">Fontspring<\/figcaption><\/figure>\n<p>Nous avons achet\u00e9 les polices Proxima Soft Regular et Proxima Soft Bold. G\u00e9n\u00e9ralement, une police de caract\u00e8res normale et en gras est suffisante pour la plupart des sites. Selon votre site, vous devrez peut-\u00eatre aussi obtenir une version en italique et semi gras. Note : Nous n&rsquo;avons pas d&rsquo;affiliation avec Fontspring, nous pensons simplement qu&rsquo;ils font bien l&rsquo;achat de polices premium et de licence !<\/p>\n<h4>\u00c9tape 1<\/h4>\n<p>Apr\u00e8s avoir achet\u00e9 vos polices, vous recevrez un email avec un lien vers les fichiers de polices.<\/p>\n<figure style=\"width: 1602px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/telechargement-polices-proxima-soft.png\" alt=\"T\u00e9l\u00e9chargement des polices Proxima Soft\" width=\"1602\" height=\"261\"><figcaption class=\"wp-caption-text\">T\u00e9l\u00e9chargement des polices Proxima Soft<\/figcaption><\/figure>\n<h4>\u00c9tape 2<\/h4>\n<p>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.<\/p>\n<figure style=\"width: 1313px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/fichiers-polices-locales.png\" alt=\"Fichiers de polices locales\" width=\"1313\" height=\"423\"><figcaption class=\"wp-caption-text\">Fichiers de polices locales<\/figcaption><\/figure>\n<h4>\u00c9tape 3<\/h4>\n<p>Nous prenons les fichiers de polices et les t\u00e9l\u00e9chargeons via FTP sur notre site WordPress dans un dossier que nous avons cr\u00e9\u00e9 et appel\u00e9 \u00ab\u00a0fonts\u00a0\u00bb. Dans cet exemple, nous utilisons un CDN pour toutes nos ressources, ainsi que le <a href=\"https:\/\/wordpress.org\/plugins\/cdn-enabler\/\">plugin CDN Enabler<\/a> gratuit de l&rsquo;\u00e9quipe KeyCDN. Ce plugin copie automatiquement les polices que nous venons de t\u00e9l\u00e9charger sur notre CDN. M\u00eame si nous disons les h\u00e9berger localement, un CDN fait toujours r\u00e9f\u00e9rence \u00e0 vos ressources locales. L&rsquo;important, c&rsquo;est que vous servez tous vos ressources \u00e0 partir du m\u00eame emplacement, sans faire r\u00e9f\u00e9rence \u00e0 plusieurs domaines (h\u00f4tes).<\/p>\n<figure style=\"width: 1181px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/telecharger-polices-serveur-web.jpg\" alt=\"T\u00e9l\u00e9charger les polices sur le serveur Web\" width=\"1181\" height=\"587\"><figcaption class=\"wp-caption-text\">T\u00e9l\u00e9charger les polices sur le serveur Web<\/figcaption><\/figure>\n<h4>\u00c9tape 4<\/h4>\n<p>Vous aurez besoin de r\u00e9f\u00e9rencer vos nouvelles polices en CSS sur votre site WordPress. Beaucoup de th\u00e8mes ont un panneau CSS personnalis\u00e9 de nos jours, ou vous pouvez utiliser un plugin gratuit comme <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS et JS<\/a>. Nous ins\u00e9rerons le code suivant, en faisant r\u00e9f\u00e9rence \u00e0 notre URL CDN.<\/p>\n<pre><code class=\"language-html\">@font-face {\n font-family: 'proxima_softregular';\n src: url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-regular-webfont.woff2') format('woff2'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-regular-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}\n\n@font-face {\n font-family: 'proxima_softbold';\n src: url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-bold-webfont.woff2') format('woff2'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/proximasoft-bold-webfont.woff') format('woff');\n font-weight: normal;\n font-style: normal;\n}<\/code><\/pre>\n<p>Vous devrez \u00e9galement mettre \u00e0 jour vos styles pour pointer vers la nouvelle famille de polices. Voici un exemple du code que nous avons utilis\u00e9 sur le th\u00e8me Twenty Seventeen.<\/p>\n<pre><code class=\"language-html\">body {font-family: 'proxima_softregular', Arial, sans-serif;}\nh1,h2,h3,h4,h5,h6 {font-family:'proxima_softbold', Arial, sans-serif;}<\/code><\/pre>\n<p>Voici une capture d&rsquo;\u00e9cran du plugin Simple Custom CSS et JS.<\/p>\n<figure style=\"width: 1570px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/polices-caracteres-personnalisees.jpg\" alt=\"Polices de caract\u00e8res personnalis\u00e9es - Code CSS\" width=\"1570\" height=\"1242\"><figcaption class=\"wp-caption-text\">Polices de caract\u00e8res personnalis\u00e9es &#8211; Code CSS<\/figcaption><\/figure>\n<h4>\u00c9tape 5<\/h4>\n<p>Si votre th\u00e8me WordPress comporte d\u00e9j\u00e0 des polices Google int\u00e9gr\u00e9es, vous devrez vous assurer de les d\u00e9sactiver. Sinon, il se peut que vous chargiez \u00e0 la fois vos polices locales et les polices Google. Puisque nous utilisons le th\u00e8me Twenty Seventeen dans ce tutoriel, nous utilisons le <a href=\"https:\/\/wordpress.org\/plugins\/disable-google-fonts\/\">plugin gratuit Disable Google Fonts<\/a>. Cela ne fonctionne que pour les th\u00e8mes par d\u00e9faut dans WordPress. Pour la plupart des th\u00e8mes, vous aurez probablement besoin de contacter le d\u00e9veloppeur et ils peuvent rapidement fournir une fonction pour d\u00e9sactiver les polices Google. Ou v\u00e9rifiez leur documentation, il s&rsquo;agit g\u00e9n\u00e9ralement d&rsquo;un r\u00e9glage tr\u00e8s rapide. Certains th\u00e8mes peuvent m\u00eame avoir une option pour les activer ou les d\u00e9sactiver en back-end.<\/p>\n<p>Et c&rsquo;est tout ! Voici une capture d&rsquo;\u00e9cran avec notre nouveau chargement des polices Proxima Soft pour nos polices et en-t\u00eates de corps sur le th\u00e8me Twenty Seventeen.<\/p>\n<figure style=\"width: 1496px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/nouvelles-polices-site-wordpress.jpg\" alt=\"Nouvelles polices sur le site WordPress\" width=\"1496\" height=\"1061\"><figcaption class=\"wp-caption-text\">Nouvelles polices sur le site WordPress<\/figcaption><\/figure>\n<p>Et voici une capture d&rsquo;\u00e9cran de nos requ\u00eates HTTP. Comme vous pouvez le voir, nous n&rsquo;avons que 2 requ\u00eates pour les polices WOFF2, au lieu des 4 requ\u00eates de Google que nous avons montr\u00e9es pr\u00e9c\u00e9demment. Nous avons aussi les polices WOFF sur le site, mais comme Chrome supporte WOFF2, elles sont choisies \u00e0 la place. Si nous \u00e9tions all\u00e9s sur le site avec IE 11 par exemple, les polices WOFF auraient \u00e9t\u00e9 charg\u00e9es \u00e0 la place.<\/p>\n<figure style=\"width: 1687px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/requetes-http-polices-hebergees-localement.jpg\" alt=\"Requ\u00eates HTTP pour les polices h\u00e9berg\u00e9es localement\" width=\"1687\" height=\"1072\"><figcaption class=\"wp-caption-text\">Requ\u00eates HTTP pour les polices h\u00e9berg\u00e9es localement<\/figcaption><\/figure>\n<h3><a id=\"host-google-fonts-locally\"><\/a>2. Comment h\u00e9berger des polices Google localement<\/h3>\n<p>La deuxi\u00e8me fa\u00e7on d&rsquo;h\u00e9berger les polices localement est d&rsquo;utiliser une police que vous aimez d\u00e9j\u00e0 sur Google Fonts et de la d\u00e9placer simplement sur votre serveur ou CDN. Open Sans est connu pour \u00eatre tr\u00e8s l\u00e9ger et tr\u00e8s rapide. Nous l&rsquo;utiliserons donc dans notre exemple.<\/p>\n<h4>\u00c9tape 1<\/h4>\n<p>La meilleure fa\u00e7on de r\u00e9cup\u00e9rer les polices Google est d&rsquo;utiliser l\u2019outil <a href=\"https:\/\/google-webfonts-helper.herokuapp.com\/\">google-webfonts-helper<\/a> gratuit, que nous utilisons pour ce tutoriel. Vous pouvez \u00e9galement consulter le projet <a href=\"https:\/\/fontfaceobserver.com\/\">Font Face Observer<\/a>. La premi\u00e8re chose que vous devrez faire est de rechercher la police Google que vous voulez et de s\u00e9lectionner les styles. Nous choisissons \u00e0 nouveau les styles de police Regular et Bold (700).<\/p>\n<figure id=\"attachment_26493\" aria-describedby=\"caption-attachment-26493\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-26493\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/telecharger-open-sans.jpg\" alt=\"T\u00e9l\u00e9charger Open Sans\" width=\"1024\" height=\"946\" srcset=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/telecharger-open-sans.jpg 1024w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/telecharger-open-sans-300x277.jpg 300w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/telecharger-open-sans-768x710.jpg 768w, https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/telecharger-open-sans-610x564.jpg 610w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-26493\" class=\"wp-caption-text\">T\u00e9l\u00e9charger Open Sans<\/figcaption><\/figure>\n<h4>\u00c9tape 2<\/h4>\n<p>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\u00e9l\u00e9chargement contenant les polices.<\/p>\n<figure style=\"width: 1365px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/css-polices-navigateurs-modernes.jpg\" alt=\"CSS pour les polices dans les navigateurs modernes\" width=\"1365\" height=\"1179\"><figcaption class=\"wp-caption-text\">CSS pour les polices dans les navigateurs modernes<\/figcaption><\/figure>\n<p>Le reste des instructions est alors tr\u00e8s similaire \u00e0 notre exemple de polices premium ci-dessus.<\/p>\n<h4>\u00c9tape 3<\/h4>\n<p>Nous prenons les fichiers de polices et les t\u00e9l\u00e9chargeons via FTP sur notre site WordPress dans un dossier que nous avons cr\u00e9\u00e9 et appel\u00e9 \u00ab\u00a0fonts\u00a0\u00bb. Dans cet exemple, nous utilisons un CDN pour toutes nos ressources, ainsi que le <a href=\"https:\/\/wordpress.org\/plugins\/cdn-enabler\/\">plugin CDN Enabler<\/a> gratuit de l&rsquo;\u00e9quipe KeyCDN. Ce plugin copie automatiquement les polices que nous venons de t\u00e9l\u00e9charger sur notre CDN. M\u00eame si nous disons les h\u00e9berger localement, un CDN fait toujours r\u00e9f\u00e9rence \u00e0 vos ressources locales. L&rsquo;important, c&rsquo;est que vous servez toutes vos ressources \u00e0 partir du m\u00eame emplacement, sans faire r\u00e9f\u00e9rence \u00e0 plusieurs domaines (h\u00e9bergeurs).<\/p>\n<figure style=\"width: 1136px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/telecharger-polices-google-serveur-web.jpg\" alt=\"T\u00e9l\u00e9charger les polices Google sur le serveur Web\" width=\"1136\" height=\"693\"><figcaption class=\"wp-caption-text\">T\u00e9l\u00e9charger les polices Google sur le serveur Web<\/figcaption><\/figure>\n<h4>\u00c9tape 4<\/h4>\n<p>Vous aurez besoin de r\u00e9f\u00e9rencer vos nouvelles polices en CSS sur votre site WordPress. Beaucoup de th\u00e8mes ont un panneau CSS personnalis\u00e9 de nos jours, ou vous pouvez utiliser un plugin gratuit comme <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\">Simple Custom CSS et JS<\/a>. Nous ins\u00e9rerons le code suivant, en faisant r\u00e9f\u00e9rence \u00e0 notre URL CDN.<\/p>\n<pre><code class=\"language-html\">\/* open-sans-regular - latin *\/\n@font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 400;\n src: local('Open Sans'), local('OpenSans'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-regular.woff2') format('woff2'), \/* Chrome 26+, Opera 23+, Firefox 39+ *\/\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-regular.woff') format('woff'); \/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *\/\n}\n\/* open-sans-700 - latin *\/\n@font-face {\n font-family: 'Open Sans';\n font-style: normal;\n font-weight: 700;\n src: local('Open Sans Bold'), local('OpenSans-Bold'),\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-700.woff2') format('woff2'), \/* Chrome 26+, Opera 23+, Firefox 39+ *\/\n url('https:\/\/cdn.wpdev.ink\/fonts\/open-sans-v13-latin-700.woff') format('woff'); \/* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ *\/\n}<\/code><\/pre>\n<p>Vous devrez \u00e9galement mettre \u00e0 jour vos styles pour pointer vers la nouvelle famille de polices. Voici un exemple du code que nous avons utilis\u00e9 sur le th\u00e8me Twenty Seventeen.<\/p>\n<pre><code class=\"language-html\">body {font-family: 'Open Sans', Arial, sans-serif;}\nh1,h2,h3,h4,h5,h6 {font-family:'Open Sans', Arial, sans-serif;}<\/code><\/pre>\n<p>Voici une capture d&rsquo;\u00e9cran du plugin Simple Custom CSS et JS.<\/p>\n<figure style=\"width: 2066px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/css-pour-polices-open-sans.jpg\" alt=\"CSS pour les polices Open Sans\" width=\"2066\" height=\"1245\"><figcaption class=\"wp-caption-text\">CSS pour les polices Open Sans<\/figcaption><\/figure>\n<h4>\u00c9tape 5<\/h4>\n<p>Si votre th\u00e8me WordPress comporte d\u00e9j\u00e0 des polices Google int\u00e9gr\u00e9es, vous devrez vous assurer de les d\u00e9sactiver. Cela peut para\u00eetre un peu ironique, puisque nous utilisons des polices Google. Mais la raison pour laquelle vous devez le faire est pour d\u00e9sactiver les requ\u00eates externes. Puisque nous utilisons le th\u00e8me Twenty Seventeen dans ce tutoriel, nous utilisons le <a href=\"https:\/\/wordpress.org\/plugins\/disable-google-fonts\/\">plugin gratuit Disable Google Fonts<\/a>. Cela ne fonctionne que pour les th\u00e8mes par d\u00e9faut dans WordPress. Pour la plupart des th\u00e8mes, vous aurez probablement besoin de contacter le d\u00e9veloppeur et ils peuvent rapidement fournir une fonction pour d\u00e9sactiver les polices Google. Ou v\u00e9rifiez leur documentation, il s&rsquo;agit g\u00e9n\u00e9ralement d&rsquo;un r\u00e9glage tr\u00e8s rapide. Certains th\u00e8mes peuvent m\u00eame avoir une option pour les activer ou les d\u00e9sactiver en back-end.<\/p>\n<p>Et c&rsquo;est tout ! Voici une capture d&rsquo;\u00e9cran de notre nouvelle police Google Open Sans qui se charge pour le corps et les en-t\u00eates sur le th\u00e8me Twenty Seventeen.<\/p>\n<figure style=\"width: 1495px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/exemple-police-open-sans-hebergee-localement.jpg\" alt=\"Exemple de police Open Sans h\u00e9berg\u00e9e localement\" width=\"1495\" height=\"1234\"><figcaption class=\"wp-caption-text\">Exemple de police Open Sans h\u00e9berg\u00e9e localement<\/figcaption><\/figure>\n<p>Et voici une capture d&rsquo;\u00e9cran de nos requ\u00eates. Comme vous pouvez le voir, nous n&rsquo;avons que 2 requ\u00eates pour les polices WOFF2, au lieu des 4 requ\u00eates de Google que nous avons montr\u00e9es pr\u00e9c\u00e9demment. Nous avons aussi les polices WOFF sur le site, mais comme Chrome supporte WOFF2, elles sont tir\u00e9es \u00e0 la place. Si nous \u00e9tions all\u00e9s sur le site avec IE 11 par exemple, les polices WOFF auraient \u00e9t\u00e9 charg\u00e9es \u00e0 la place.<\/p>\n<figure style=\"width: 1683px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2017\/02\/requetes-http-pour-open-sans.jpg\" alt=\"Requ\u00eates http pour Open Sans\" width=\"1683\" height=\"1066\"><figcaption class=\"wp-caption-text\">Requ\u00eates http pour Open Sans<\/figcaption><\/figure>\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Et c&rsquo;est tout ! Vous savez maintenant comment h\u00e9berger des polices localement \u00e0 partir d&rsquo;une boutique de polices premium ou d\u00e9placer des polices Google sur votre propre serveur et\/ou CDN. Vous pouvez donc maintenant jeter un coup d&rsquo;\u0153il \u00e0 toutes les belles polices de caract\u00e8res qui existent, sans vous soucier autant de la fa\u00e7on dont elles affectent les performances. Ils pourraient tout simplement donner \u00e0 votre site WordPress le lifting dont il avait besoin (assurez-vous de lire notre guide d\u00e9taill\u00e9 sur les <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-wordpress\/\">polices WordPress<\/a>) ! Et si vous \u00eates curieux de savoir pourquoi nous n&rsquo;utilisons pas de polices localement, c&rsquo;est parce que nous travaillons \u00e0 la conception d&rsquo;un nouveau site Web, ce qui pourrait se produire dans un proche avenir. Un excellent article alternatif pour les police syst\u00e8me est <a href=\"https:\/\/woorkup.com\/system-font\/\">System Font<\/a>.<\/p>\n<p>Nous aimerions conna\u00eetre votre configuration. Utilisez-vous un service tiers pour charger vos polices Web et avez-vous d\u00e9j\u00e0 essay\u00e9 l&rsquo;h\u00e9bergement local ?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quand il s&rsquo;agit d&rsquo;h\u00e9berger et d&rsquo;utiliser des polices sur votre site WordPress, il y a beaucoup d&rsquo;options diff\u00e9rentes. Vous pouvez les h\u00e9berger localement, vous pouvez utiliser &#8230;<\/p>\n","protected":false},"author":38,"featured_media":26499,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[46,33],"topic":[1041,1030],"class_list":["post-26479","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-webperf","tag-wordpress","topic-conception-site-web-wordpress","topic-polices-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Guide d\u00e9taill\u00e9 sur l&#039;h\u00e9bergement de polices en local dans WordPress<\/title>\n<meta name=\"description\" content=\"Consultez ce guide d\u00e9taill\u00e9 sur l&#039;h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Guide d\u00e9taill\u00e9 sur l&#039;h\u00e9bergement de polices en local dans WordPress\" \/>\n<meta property=\"og:description\" content=\"Consultez ce guide d\u00e9taill\u00e9 sur l&#039;h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-15T17:43:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-20T12:47:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/FR-Homepage-featured-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Consultez ce guide d\u00e9taill\u00e9 sur l&#039;h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/local-fonts-wordpress.png\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Guide d\u00e9taill\u00e9 sur l&rsquo;h\u00e9bergement de polices en local dans WordPress\",\"datePublished\":\"2019-05-15T17:43:19+00:00\",\"dateModified\":\"2024-09-20T12:47:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\"},\"wordCount\":3733,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png\",\"keywords\":[\"webperf\",\"WordPress\"],\"articleSection\":[\"Tutoriels sur la performance WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\",\"name\":\"Guide d\u00e9taill\u00e9 sur l'h\u00e9bergement de polices en local dans WordPress\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png\",\"datePublished\":\"2019-05-15T17:43:19+00:00\",\"dateModified\":\"2024-09-20T12:47:05+00:00\",\"description\":\"Consultez ce guide d\u00e9taill\u00e9 sur l'h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Conception de sites web WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/conception-site-web-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Guide d\u00e9taill\u00e9 sur l&#8217;h\u00e9bergement de polices en local dans WordPress\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Guide d\u00e9taill\u00e9 sur l'h\u00e9bergement de polices en local dans WordPress","description":"Consultez ce guide d\u00e9taill\u00e9 sur l'h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.","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:\/\/kinsta.com\/fr\/blog\/polices-local\/","og_locale":"fr_FR","og_type":"article","og_title":"Guide d\u00e9taill\u00e9 sur l'h\u00e9bergement de polices en local dans WordPress","og_description":"Consultez ce guide d\u00e9taill\u00e9 sur l'h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.","og_url":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2019-05-15T17:43:19+00:00","article_modified_time":"2024-09-20T12:47:05+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2024\/11\/FR-Homepage-featured-image.png","type":"image\/png"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Consultez ce guide d\u00e9taill\u00e9 sur l'h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.","twitter_image":"https:\/\/kinsta.com\/wp-content\/uploads\/2017\/02\/local-fonts-wordpress.png","twitter_creator":"@brianleejackson","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Brian Jackson","Dur\u00e9e de lecture estim\u00e9e":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Guide d\u00e9taill\u00e9 sur l&rsquo;h\u00e9bergement de polices en local dans WordPress","datePublished":"2019-05-15T17:43:19+00:00","dateModified":"2024-09-20T12:47:05+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/"},"wordCount":3733,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png","keywords":["webperf","WordPress"],"articleSection":["Tutoriels sur la performance WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/polices-local\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/","url":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/","name":"Guide d\u00e9taill\u00e9 sur l'h\u00e9bergement de polices en local dans WordPress","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png","datePublished":"2019-05-15T17:43:19+00:00","dateModified":"2024-09-20T12:47:05+00:00","description":"Consultez ce guide d\u00e9taill\u00e9 sur l'h\u00e9bergement des polices en local dans WordPress. Par exemple, vous pouvez utiliser une police premium ou une police Google localement sur votre propre serveur.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/polices-local\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2019\/05\/polices-local.png","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/polices-local\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Conception de sites web WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/conception-site-web-wordpress\/"},{"@type":"ListItem","position":3,"name":"Guide d\u00e9taill\u00e9 sur l&#8217;h\u00e9bergement de polices en local dans WordPress"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/26479","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=26479"}],"version-history":[{"count":13,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/26479\/revisions"}],"predecessor-version":[{"id":46430,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/26479\/revisions\/46430"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/translations\/en"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/translations\/es"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/translations\/fr"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/translations\/pt"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/translations\/jp"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/26479\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/26499"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=26479"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=26479"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=26479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}