O\u00f9 trouver des polices web, quelles polices sont compatibles avec le langage HTML et lesquelles sont s\u00fbres pour le web (web safe) et peuvent \u00eatre utilis\u00e9es sur n’importe quel site web ? Nous allons les explorer dans cet article.<\/p>\n
C’est parti !<\/p>\n
Polices HTML : Que sont les polices web ?<\/h2>\n
Les caract\u00e8res ont une histoire riche, mais les polices de caract\u00e8res, telles que nous les connaissons aujourd’hui, ont \u00e9t\u00e9 largement utilis\u00e9es avec l’essor des ordinateurs et de l’internet. Les polices num\u00e9riques n\u00e9cessitaient un traitement sp\u00e9cial pour s’afficher sur les \u00e9crans. Et lorsque les diff\u00e9rentes tailles d’\u00e9cran et les diff\u00e9rents appareils sont entr\u00e9s en jeu, les choses se sont compliqu\u00e9es.<\/p>\n Il existe plusieurs types de polices num\u00e9riques. Certaines polices sont principalement destin\u00e9es \u00e0 l’impression et \u00e0 la conception graphique. Elles ont tendance \u00e0 \u00eatre grandes et ne conviennent pas aux sites web, mais sont parfaites pour cr\u00e9er des graphiques. Il existe \u00e9galement des polices s\u00fbres pour le web (web safe), que l’on trouve sur la majorit\u00e9 des machines.<\/p>\n Mais pour la conception de sites web, vous devez rechercher des polices web, des caract\u00e8res sp\u00e9cialement con\u00e7us pour un rendu parfait sur le web et sur divers appareils. Vous pouvez \u00e9galement utiliser des polices web dans les e-mails<\/a> ou d’autres services en ligne.<\/p>\n Les polices web diff\u00e8rent des polices standards d\u2019ordinateur de bureau t\u00e9l\u00e9chargeables pour un certain nombre de raisons. D’abord, elles ne peuvent souvent pas \u00eatre utilis\u00e9es avec des programmes sur votre ordinateur; elles doivent \u00eatre t\u00e9l\u00e9charg\u00e9es sur un serveur et utilis\u00e9es sur le web.<\/p>\n Elles sont \u00e9galement con\u00e7ues pour \u00eatre lisibles sur diff\u00e9rents \u00e9crans et pour diff\u00e9rentes tailles. Elles peuvent \u00eatre stylis\u00e9es \u00e0 l’aide de feuilles de style en cascade<\/a> (par exemple en appliquant du gras ou de l’italique, des couleurs et d’autres attributs) et prennent en charge d’autres conditions telles que le rendu de droite \u00e0 gauche.<\/p>\n Bien que les polices web ne soient pas install\u00e9es sur vos appareils ou ceux de vos visiteurs, il existe des moyens sp\u00e9ciaux de les afficher afin que toute personne qui visite votre site puisse les voir.<\/p>\n Vous pouvez soit t\u00e9l\u00e9charger ces polices comme d’habitude et les charger sur votre serveur, soit utiliser un service sp\u00e9cial d’h\u00e9bergement de polices web qui les int\u00e8gre \u00e0 votre site sans n\u00e9cessiter de t\u00e9l\u00e9chargement.<\/p>\n\n Certaines polices ne sont pas destin\u00e9es \u00e0 \u00eatre utilis\u00e9es sur le web, mais lesquelles peuvent \u00eatre ins\u00e9r\u00e9es dans votre site HTML ?<\/p>\n Essentiellement, vous pouvez utiliser n’importe quelle police t\u00e9l\u00e9chargeable sur votre site. Il vous suffit de la t\u00e9l\u00e9verser et de la configurer correctement, et elle devrait s’afficher sur votre site web.<\/span><\/p>\n Mais si vous pouvez techniquement utiliser n’importe quelle police sur votre site, ce n’est pas toujours la meilleure id\u00e9e. Vous devez rechercher sp\u00e9cifiquement des polices pour le web, et non des polices destin\u00e9es \u00e0 \u00eatre utilis\u00e9es pour l’impression ou la conception graphique. Certaines polices sont tellement stylis\u00e9es ou destin\u00e9es \u00e0 des tailles de texte tellement grandes qu’elles ne s’afficheront pas correctement sur votre site. Avec une police web, ce n’est pas un probl\u00e8me.<\/p>\n L’utilisation de polices d\u2019ordinateur sur votre site (ou de polices web pour la conception d’imprim\u00e9s) soul\u00e8ve \u00e9galement des probl\u00e8mes de licence. L’utilisation d’une police sur un support diff\u00e9rent de celui pour lequel vous l’avez achet\u00e9e peut vous attirer des ennuis. Veillez \u00e0 lire attentivement la licence de votre police avant de l’acheter.<\/p>\n Vous pouvez \u00e9galement rechercher certains h\u00e9bergeurs qui vous permettent d’utiliser un simple appel dans le HTML pour rendre leurs polices sur votre propre site web, par le biais de plans gratuits ou payants.<\/p>\n Dans tous les cas, il faut que la police utilis\u00e9e soit correctement t\u00e9l\u00e9vers\u00e9e<\/a> et qu’elle ait le bon type de fichier :<\/p>\n Gr\u00e2ce \u00e0 ces types de fichiers de polices, vous pourrez ensuite les utiliser sur l’ensemble de votre site et les styliser avec HTML et CSS.<\/p>\n Il existe \u00e9galement des polices s\u00fbres pour le web qui fonctionnent g\u00e9n\u00e9ralement de mani\u00e8re universelle sur tous les navigateurs et programmes.<\/p>\n Le probl\u00e8me avec la plupart des polices web est qu’il n’y a aucune garantie qu’elles s’afficheront correctement sur votre site. Contrairement \u00e0 la conception graphique, o\u00f9 il suffit de cr\u00e9er une image dans un programme et de l’imprimer pour la distribuer, un navigateur<\/a> doit rendre les polices web chaque fois que quelqu’un ouvre la page. Si vos polices ne se chargent pas, vous risquez de vous retrouver avec un site web vide et d\u00e9fectueux.<\/p>\n C’est pourquoi certains propri\u00e9taires de sites web choisissent de ne recourir qu’\u00e0 des polices web safe<\/a>. Ces polices sont pr\u00e9install\u00e9es sur la plupart des syst\u00e8mes, ce qui garantit leur affichage correct sur tous les appareils, sauf les plus obscurs. Elles ont \u00e9galement tendance \u00e0 se charger beaucoup plus rapidement que les polices web, qui peuvent \u00eatre lentes \u00e0 s’afficher.<\/p>\n Si tout ce qui vous pr\u00e9occupe est d’optimiser les performances et de vous assurer que votre site affiche correctement les polices, les polices web safe sont faites pour vous.<\/p>\n Voici une liste de polices s\u00fbres pour le web, que vous pouvez g\u00e9n\u00e9ralement utiliser sans probl\u00e8me.<\/p>\n Il existe \u00e9galement des dizaines d’autres polices s\u00fbres pour le web<\/a>, mais celles-ci sont les plus r\u00e9pandues sur les appareils.<\/p>\n Parmi toutes ces polices, Arial, Times New Roman, Helvetica et Courier New sont les plus s\u00fbres. Bien qu’elles soient consid\u00e9r\u00e9es comme s\u00fbres pour le web, certaines des autres ne fonctionnent pas sur certains syst\u00e8mes d’exploitation.<\/p>\n Le probl\u00e8me est que, \u00e0 moins que vous ne g\u00e9riez un site gouvernemental ou un simple site d’information, cela ne vaut pas la peine de sacrifier votre image de marque en \u00e9vitant une majorit\u00e9 de polices. Les polices s\u00fbres pour le web sont lisibles, mais elles sont aussi trop g\u00e9n\u00e9riques et trop utilis\u00e9es.<\/p>\n Il vaut mieux choisir un jeu de polices plus joli et plus unique pour votre site, d’autant plus qu’il existe une solution au probl\u00e8me des polices web qui ne se chargent pas : les polices de secours.<\/p>\n Les piles de polices (font stacks), \u00e9galement appel\u00e9es polices de secours (fallback fonts), sont la seule raison d’utiliser des polices web audacieuses et cr\u00e9atives.<\/p>\n Peu importe ce que vous faites ou les pr\u00e9cautions que vous prenez, il y a toujours quelqu’un qui ne pourra pas charger vos polices. Peut-\u00eatre que le Javascript est d\u00e9sactiv\u00e9 et que vos polices h\u00e9berg\u00e9es ne s’affichent pas correctement, ou que quelque chose ne va pas dans le code<\/a> et emp\u00eache les polices que vous avez t\u00e9l\u00e9vers\u00e9es de s’afficher. Ou peut-\u00eatre qu’une certaine police n’est pas compatible avec l’appareil d’une personne.<\/p>\n Gr\u00e2ce aux polices de secours<\/a>, il est facile de charger une police s\u00fbre pour le web si quelque chose ne va pas. Cela fonctionne en s\u00e9lectionnant une police que l’utilisateur a install\u00e9e sur la base de la famille de polices<\/a> :<\/p>\n N’oubliez pas que les piles de polices sont effectivement une \u00ab\u00a0pile\u00a0\u00bb ; il est tout \u00e0 fait possible d’avoir plusieurs polices de secours en s\u00e9quence. Veillez simplement \u00e0 toujours disposer d’une police s\u00fbre pour le web \u00e0 la fin de la pile, et vous aurez toujours la possibilit\u00e9 de faire passer votre image de marque avec une police similaire si la police principale fait d\u00e9faut.<\/p>\n Si vous souhaitez ajouter une police web \u00e0 votre site, vous avez plusieurs possibilit\u00e9s.<\/p>\n Pour les utilisateurs de WordPress, le moyen le plus simple d’int\u00e9grer des polices sur votre site est d’utiliser une extension. Les deux plus populaires sont Easy Google Fonts<\/a> et Use Any Font<\/a>. La premi\u00e8re simplifie le processus d’ajout de polices Google Fonts \u00e0 votre site web, tandis qu\u2019UAF vous permet de t\u00e9l\u00e9verser directement des polices sur votre site.<\/p>\n Si vous n’utilisez pas WordPress, ou si vous ne voulez pas vous appuyer sur une extension, le processus n\u00e9cessitera un peu de bricolage manuel.<\/p>\n Tout d’abord, vous pouvez utiliser des polices h\u00e9berg\u00e9es ailleurs, par exemple avec Google Fonts<\/a>. Les instructions d\u00e9pendent ici du service que vous choisissez. Avec Google Fonts, vous devrez int\u00e9grer la police que vous souhaitez utiliser dans votre Vous pouvez \u00e9galement h\u00e9berger localement sur votre site les polices<\/a> que vous avez t\u00e9l\u00e9charg\u00e9es sur Internet. Cela peut \u00eatre pr\u00e9f\u00e9rable car vous n’aurez pas besoin de faire appel \u00e0 des services tiers.<\/p>\n Heureusement, c’est tr\u00e8s facile \u00e0 faire, pour autant que vous disposiez d’une police web correctement configur\u00e9e. Il suffit de t\u00e9l\u00e9verser les fichiers sur votre serveur, puis d’utiliser la r\u00e8gle @font-face<\/a> dans votre feuille de style pour la d\u00e9finir. Par exemple :<\/p>\n Vous pouvez ensuite utiliser la balise Une fois votre police t\u00e9l\u00e9vers\u00e9e en toute s\u00e9curit\u00e9 sur votre site web, vous pouvez maintenant la styliser \u00e0 l’aide de HTML et de CSS<\/a>. M\u00eame si vous avez tr\u00e8s peu de connaissances en programmation, il est assez facile de styliser une police. Vous pouvez modifier la couleur du texte, la couleur d’arri\u00e8re-plan, la taille, le style ou le poids.<\/p>\n Note :<\/strong> si vous avez travaill\u00e9 avec des versions HTML plus anciennes, vous vous souvenez peut-\u00eatre de la balise <font>. Celle-ci n’est plus prise en charge et ne doit pas \u00eatre utilis\u00e9e. \u00c0 la place, vous pouvez donner un style au texte \u00e0 l’aide de CSS ou d’un \u00e9l\u00e9ment de style HTML.<\/p>\n Tout d’abord, vous pouvez modifier la police \u00e0 l’aide de codes de couleur. Vous pouvez utiliser un nom de couleur<\/a> comme \u00ab red \u00bb, un code RVB ou une valeur HEX. Cette derni\u00e8re est d\u00e9finie avec la propri\u00e9t\u00e9 Ou dans un \u00e9l\u00e9ment de style HTML individuel :<\/p>\n La couleur d’arri\u00e8re-plan est la m\u00eame, mais elle utilise l’attribut background-color.<\/p>\n Vient ensuite la taille de la police<\/a>. Il peut s’agir de pixels, de pourcentages ou en ems<\/a> (qui sont utiles pour la conception de sites responsives).<\/p>\n Ou :<\/p>\n Enfin, il y a le style de la police<\/a> et le poids, ou l’italique et le gras. Pour un texte inclin\u00e9, utilisez la balise \u00ab\u00a0italic\u00a0\u00bb.<\/p>\n Vous pouvez \u00e9galement utiliser les balises HTML \u00e0 la place. Pour l’italique, vous pouvez utiliser :<\/p>\n pour un texte qui exprime l’emphase, ou utiliser :<\/p>\n pour un texte qui doit \u00eatre visuellement distinct.<\/p>\n Et pour le gras, utilisez :<\/p>\n Par exemple :<\/p>\n ou<\/p>\n Que vous souhaitiez utiliser un h\u00e9bergeur de polices tiers ou les t\u00e9l\u00e9charger, vous devez savoir o\u00f9 se trouvent les meilleurs endroits pour trouver des polices. Il existe des centaines de distributeurs, mais une bonne poign\u00e9e d’entre eux sont connus pour \u00eatre des sources fiables d’obtention de polices. En voici quelques-uns :<\/p>\n Il existe des milliers de polices pour le web, mais par o\u00f9 commencer ? Voici dix polices HTML simples qui s’int\u00e8grent parfaitement \u00e0 tout site web. Elles sont toutes web safe et devraient donc fonctionner sur presque tous les appareils. Elles constituent \u00e9galement d’excellentes polices de secours.<\/p>\n Si vous avez besoin de quelque chose d’un peu plus excitant, nous avons de nombreux articles sur les polices cursives<\/a>, les polices de calligraphie<\/a> et les polices modernes<\/a>.<\/p>\n Arial est la plus connue de toutes les polices de caract\u00e8res. Ce n’est pas la plus belle, mais elle est simple et utile dans de nombreuses situations.<\/p>\n Times New Roman est \u00e9galement une police extr\u00eamement courante. Elle est id\u00e9ale si vous g\u00e9rez un site plus formel. Cette police \u00e0 empattement n’est pas particuli\u00e8rement excitante, mais elle n’est pas non plus distrayante.<\/p>\n Palatino vous est peut-\u00eatre famili\u00e8re, car elle est souvent utilis\u00e9e pour l’impression de livres. Aujourd’hui, il s’agit d’une \u00e9l\u00e9gante police de caract\u00e8res num\u00e9rique incluse par d\u00e9faut sur de nombreux appareils.<\/p>\n Verdana est connue pour \u00eatre tr\u00e8s facile \u00e0 lire, et elle continue d’\u00eatre tr\u00e8s belle, m\u00eame en grande taille. Cette police sans serif est une bonne alternative \u00e0 Arial.<\/p>\n Rappelant le texte des vieilles machines \u00e0 \u00e9crire, Courier New est un excellent design monospace pour les sites qui veulent un look d\u00e9mod\u00e9 mais lisible.<\/p>\n Calibri est une police sans empattement simple et agr\u00e9able, fournie en standard avec des programmes tels que Microsoft Office. Toutefois, il s’agit d’une police propri\u00e9taire, qui n’est souvent prise en charge que par les syst\u00e8mes d’exploitation Windows.<\/p>\n Cette police \u00e0 empattement arrondi est inspir\u00e9e de la police Garamond, une police similaire s\u00fbre pour le web. Si vous avez besoin d’une police formelle, mais pas aussi s\u00e9rieuse que Times New Roman, c’est un bon choix.<\/p>\n Tout comme Palatino, Garamond est une police classique souvent utilis\u00e9e pour l’impression de livres. Bien qu’elle ait \u00e9t\u00e9 mise \u00e0 jour pour les syst\u00e8mes d’exploitation modernes, elle reste assez d\u00e9mod\u00e9e.<\/p>\n L’espacement minimal des lettres de cette police \u00e0 empattement lui donne un aspect et une sensation uniques. Vous pouvez la trouver sur la plupart des appareils Apple.<\/p>\n Cette police propre a servi de police par d\u00e9faut pour les anciens syst\u00e8mes d’exploitation Windows. Son aspect plus audacieux lui permet de se d\u00e9marquer suffisamment sans \u00eatre distrayant.<\/p>\n\n Il est important de choisir des polices web qui auront un bel aspect<\/a> sur votre site web, seront lisibles et personnifieront votre marque<\/a>. Il existe plusieurs sites o\u00f9 vous pouvez installer des polices gratuites ou t\u00e9l\u00e9charger des polices sous licence payantes. Nous vous proposons quelques exemples de bonnes polices pour commencer.<\/p>\n Vous n’\u00eates pas oblig\u00e9 de vous en tenir aux polices ennuyeuses et s\u00fbres que vous voyez partout sur Internet depuis des d\u00e9cennies. Gr\u00e2ce aux polices de secours, vous pouvez choisir la typographie que vous aimez et d\u00e9finir une police de secours \u00e0 utiliser si elle ne se charge pas.<\/p>\n Que vous utilisiez ces polices HTML sur votre site web, dans des e-mails ou sur votre logo, veillez \u00e0 effectuer de nombreux tests pour que votre site reste lisible et que la typographie s’int\u00e8gre bien au reste de votre design.<\/p>\n","protected":false},"excerpt":{"rendered":" S’il y a une chose qui est la plus importante pour l’image de marque et l’apparence de votre site web, c’est bien les polices de caract\u00e8res. …<\/p>\n","protected":false},"author":20,"featured_media":45344,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[282,112],"topic":[1041,1030],"class_list":["post-45341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-fonts","tag-webdesign","topic-conception-site-web-wordpress","topic-polices-wordpress"],"yoast_head":"\n![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/03\/Google-Fonts-Most-Popular-Web-Fonts.png\")
Quelles polices pouvez-vous utiliser en HTML ?<\/h3>\n
![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/11\/scribble-font.png\")
\n
Que sont les polices s\u00fbres pour le web ?<\/h3>\n
![\"Arial](\"https:\/\/kinsta.com\/wp-content\/uploads\/2020\/08\/arial-font.jpg\")
\n
Une note sur les polices de secours<\/h3>\n
\n
Comment ajouter des polices avec HTML<\/h2>\n
<head><\/code>, puis faire appel \u00e0 elle lorsque vous voudrez l’utiliser.<\/p>\n\n@font-face {\n\nfont-family: FontName;\n\nsrc: url(FontLocationOnServer);\n\n}<\/code><\/pre>\nfont-family<\/code> pour faire appel \u00e0 votre police l\u00e0 o\u00f9 vous le souhaitez dans le document HTML.<\/p>\nStylisation des polices avec HTML et CSS<\/h3>\n
color<\/code> comme suit :<\/p>\n\np {\n\ncolor: blue;\n\n}\n\n<\/code><\/pre>\n\n<p style=\"color:blue;\">Text.<\/p>\n<\/code><\/pre>\n\np {\n\nbackground-color: blue;\n\n}<\/code><\/pre>\n p {\n\nfont-size: 16px;\n\n}<\/code><\/pre>\n<p style=\"font-size:200%;\">Text.<\/p><\/code><\/pre>\n![\"D\u00e9finir](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-size-css.png\")
.italic {\n\nfont-style: italic;\n\n}\n\nAnd for bold:\u00a0\n\n.bold {\n\nfont-weight: bold;\n\n}<\/code><\/pre>\n![\"D\u00e9finir](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/font-style-css.png\")
<em><\/code><\/pre>\n <i> <\/code><\/pre>\n<b><\/code> or <strong><\/code><\/pre>\n<b>Bold Text<\/b><\/code><\/p>\n<strong>I'm of special importance.<\/strong><\/code><\/pre>\nO\u00f9 trouver des polices HTML ?<\/h2>\n
\n
![\"google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/google-fonts.jpg\")
\n
Le top 10 des polices HTML<\/h2>\n
1. Arial<\/h3>\n
![\"Un](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/arial-font.png\")
2. Times New Roman<\/h3>\n
3. Palatino<\/h3>\n
![\"palantino\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/palatino-font.png\")
4. Verdana<\/h3>\n
5. Courier New<\/h3>\n
![\"Courier](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/courier-new-font.png\")
6. Calibri<\/h3>\n
![\"calibri\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/calibri-font.png\")
7. Georgia<\/h3>\n
![\"georgia\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/georgia-font.jpg\")
8. Garamond<\/h3>\n
![\"garamond\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/garamond-font.png\")
9. Didot<\/h3>\n
![\"didot\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/didot-font.jpg\")
10. Tahoma<\/h3>\n
![\"tahoma\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/02\/tahoma-font.png\")
R\u00e9sum\u00e9<\/h2>\n