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ères. Une police de caractères soigneusement choisie peut transmettre une personnalité, rendre de longs passages de texte plus lisibles et consolider votre marque dans l’esprit des gens.

Mais vous ne pouvez pas télécharger n’importe quelle vieille police et l’utiliser sur votre site web. Il faut d’abord prendre en compte un certain nombre d’éléments.

Où trouver des polices web, quelles polices sont compatibles avec le langage HTML et lesquelles sont sûres pour le web (web safe) et peuvent être utilisées sur n’importe quel site web ? Nous allons les explorer dans cet article.

C’est parti !

Polices HTML : Que sont les polices web ?

Les caractères ont une histoire riche, mais les polices de caractères, telles que nous les connaissons aujourd’hui, ont été largement utilisées avec l’essor des ordinateurs et de l’internet. Les polices numériques nécessitaient un traitement spécial pour s’afficher sur les écrans. Et lorsque les différentes tailles d’écran et les différents appareils sont entrés en jeu, les choses se sont compliquées.

Les polices Google Fonts sont une collection de polices de caractères tendance pour le web.

Les polices Google Fonts sont une collection de polices de caractères tendance pour le web.

Il existe plusieurs types de polices numériques. Certaines polices sont principalement destinées à l’impression et à la conception graphique. Elles ont tendance à être grandes et ne conviennent pas aux sites web, mais sont parfaites pour créer des graphiques. Il existe également des polices sûres pour le web (web safe), que l’on trouve sur la majorité des machines.

Mais pour la conception de sites web, vous devez rechercher des polices web, des caractères spécialement conçus pour un rendu parfait sur le web et sur divers appareils. Vous pouvez également utiliser des polices web dans les e-mails ou d’autres services en ligne.

Les polices web diffèrent des polices standards d’ordinateur de bureau téléchargeables pour un certain nombre de raisons. D’abord, elles ne peuvent souvent pas être utilisées avec des programmes sur votre ordinateur; elles doivent être téléchargées sur un serveur et utilisées sur le web.

Elles sont également conçues pour être lisibles sur différents écrans et pour différentes tailles. Elles peuvent être stylisées à l’aide de feuilles de style en cascade (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 à gauche.

Bien que les polices web ne soient pas installées sur vos appareils ou ceux de vos visiteurs, il existe des moyens spéciaux de les afficher afin que toute personne qui visite votre site puisse les voir.

Vous pouvez soit télécharger ces polices comme d’habitude et les charger sur votre serveur, soit utiliser un service spécial d’hébergement de polices web qui les intègre à votre site sans nécessiter de téléchargement.

Si vous vous souciez de l'image de marque et de l'apparence de votre site, alors vous assurer que vous utilisez une police sûre pour le web est une étape cruciale de votre processus de conception. ✨ Trouvez 10 excellentes options juste ici👇Click to Tweet

Quelles polices pouvez-vous utiliser en HTML ?

Certaines polices ne sont pas destinées à être utilisées sur le web, mais lesquelles peuvent être insérées dans votre site HTML ?

Essentiellement, vous pouvez utiliser n’importe quelle police téléchargeable sur votre site. Il vous suffit de la téléverser et de la configurer correctement, et elle devrait s’afficher sur votre site web.

La police Scribble n'est pas pratique pour les pages web

La police Scribble n’est pas pratique pour les pages web

Mais si vous pouvez techniquement utiliser n’importe quelle police sur votre site, ce n’est pas toujours la meilleure idée. Vous devez rechercher spécifiquement des polices pour le web, et non des polices destinées à être utilisées pour l’impression ou la conception graphique. Certaines polices sont tellement stylisées ou destinées à 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ème.

L’utilisation de polices d’ordinateur sur votre site (ou de polices web pour la conception d’imprimés) soulève également des problèmes de licence. L’utilisation d’une police sur un support différent de celui pour lequel vous l’avez achetée peut vous attirer des ennuis. Veillez à lire attentivement la licence de votre police avant de l’acheter.

Vous pouvez également rechercher certains hébergeurs 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.

Dans tous les cas, il faut que la police utilisée soit correctement téléversée et qu’elle ait le bon type de fichier :

Grâce à ces types de fichiers de polices, vous pourrez ensuite les utiliser sur l’ensemble de votre site et les styliser avec HTML et CSS.

Il existe également des polices sûres pour le web qui fonctionnent généralement de manière universelle sur tous les navigateurs et programmes.

Que sont les polices sûres pour le web ?

Le problème avec la plupart des polices web est qu’il n’y a aucune garantie qu’elles s’afficheront correctement sur votre site. Contrairement à la conception graphique, où il suffit de créer une image dans un programme et de l’imprimer pour la distribuer, un navigateur 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éfectueux.

C’est pourquoi certains propriétaires de sites web choisissent de ne recourir qu’à des polices web safe. Ces polices sont préinstallées sur la plupart des systèmes, ce qui garantit leur affichage correct sur tous les appareils, sauf les plus obscurs. Elles ont également tendance à se charger beaucoup plus rapidement que les polices web, qui peuvent être lentes à s’afficher.

Arial est une police courante et sûre pour le web

Arial est une police courante et sûre pour le web

Si tout ce qui vous préoccupe est d’optimiser les performances et de vous assurer que votre site affiche correctement les polices, les polices web safe sont faites pour vous.

Voici une liste de polices sûres pour le web, que vous pouvez généralement utiliser sans problème.

Il existe également des dizaines d’autres polices sûres pour le web, mais celles-ci sont les plus répandues sur les appareils.

Parmi toutes ces polices, Arial, Times New Roman, Helvetica et Courier New sont les plus sûres. Bien qu’elles soient considérées comme sûres pour le web, certaines des autres ne fonctionnent pas sur certains systèmes d’exploitation.

Le problème est que, à moins que vous ne gériez un site gouvernemental ou un simple site d’information, cela ne vaut pas la peine de sacrifier votre image de marque en évitant une majorité de polices. Les polices sûres pour le web sont lisibles, mais elles sont aussi trop génériques et trop utilisées.

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ème des polices web qui ne se chargent pas : les polices de secours.

Une note sur les polices de secours

Les piles de polices (font stacks), également appelées polices de secours (fallback fonts), sont la seule raison d’utiliser des polices web audacieuses et créatives.

Peu importe ce que vous faites ou les précautions que vous prenez, il y a toujours quelqu’un qui ne pourra pas charger vos polices. Peut-être que le Javascript est désactivé et que vos polices hébergées ne s’affichent pas correctement, ou que quelque chose ne va pas dans le code et empêche les polices que vous avez téléversées de s’afficher. Ou peut-être qu’une certaine police n’est pas compatible avec l’appareil d’une personne.

Grâce aux polices de secours, il est facile de charger une police sûre pour le web si quelque chose ne va pas. Cela fonctionne en sélectionnant une police que l’utilisateur a installée sur la base de la famille de polices :

N’oubliez pas que les piles de polices sont effectivement une « pile » ; il est tout à fait possible d’avoir plusieurs polices de secours en séquence. Veillez simplement à toujours disposer d’une police sûre pour le web à la fin de la pile, et vous aurez toujours la possibilité de faire passer votre image de marque avec une police similaire si la police principale fait défaut.

Comment ajouter des polices avec HTML

Si vous souhaitez ajouter une police web à votre site, vous avez plusieurs possibilités.

Pour les utilisateurs de WordPress, le moyen le plus simple d’intégrer des polices sur votre site est d’utiliser une extension. Les deux plus populaires sont Easy Google Fonts et Use Any Font. La première simplifie le processus d’ajout de polices Google Fonts à votre site web, tandis qu’UAF vous permet de téléverser directement des polices sur votre site.

Si vous n’utilisez pas WordPress, ou si vous ne voulez pas vous appuyer sur une extension, le processus nécessitera un peu de bricolage manuel.

Tout d’abord, vous pouvez utiliser des polices hébergées ailleurs, par exemple avec Google Fonts. Les instructions dépendent ici du service que vous choisissez. Avec Google Fonts, vous devrez intégrer la police que vous souhaitez utiliser dans votre <head>, puis faire appel à elle lorsque vous voudrez l’utiliser.

Vous pouvez également héberger localement sur votre site les polices que vous avez téléchargées sur Internet. Cela peut être préférable car vous n’aurez pas besoin de faire appel à des services tiers.

Heureusement, c’est très facile à faire, pour autant que vous disposiez d’une police web correctement configurée. Il suffit de téléverser les fichiers sur votre serveur, puis d’utiliser la règle @font-face dans votre feuille de style pour la définir. Par exemple :


@font-face {

font-family: FontName;

src: url(FontLocationOnServer);

}

Vous pouvez ensuite utiliser la balise font-family pour faire appel à votre police là où vous le souhaitez dans le document HTML.

Stylisation des polices avec HTML et CSS

Une fois votre police téléversée en toute sécurité sur votre site web, vous pouvez maintenant la styliser à l’aide de HTML et de CSS. Même si vous avez très peu de connaissances en programmation, il est assez facile de styliser une police. Vous pouvez modifier la couleur du texte, la couleur d’arrière-plan, la taille, le style ou le poids.

Note : si vous avez travaillé avec des versions HTML plus anciennes, vous vous souvenez peut-être de la balise <font>. Celle-ci n’est plus prise en charge et ne doit pas être utilisée. À la place, vous pouvez donner un style au texte à l’aide de CSS ou d’un élément de style HTML.

Tout d’abord, vous pouvez modifier la police à l’aide de codes de couleur. Vous pouvez utiliser un nom de couleur comme « red », un code RVB ou une valeur HEX. Cette dernière est définie avec la propriété color comme suit :


p {

color: blue;

}

Ou dans un élément de style HTML individuel :


<p style="color:blue;">Text.</p>

La couleur d’arrière-plan est la même, mais elle utilise l’attribut background-color.


p {

background-color: blue;

}

Vient ensuite la taille de la police. Il peut s’agir de pixels, de pourcentages ou en ems (qui sont utiles pour la conception de sites responsives).

 p {

font-size: 16px;

}

Ou :

<p style="font-size:200%;">Text.</p>
Définir la taille de la police à l'aide de CSS

Définir la taille de la police à l’aide de CSS

Enfin, il y a le style de la police et le poids, ou l’italique et le gras. Pour un texte incliné, utilisez la balise « italic ».

.italic {

font-style: italic;

}

And for bold: 

.bold {

font-weight: bold;

}
Définir le style de la police à l'aide de CSS.

Définir le style de la police à l’aide de CSS.

Vous pouvez également utiliser les balises HTML à la place. Pour l’italique, vous pouvez utiliser :

<em>

pour un texte qui exprime l’emphase, ou utiliser :

 <i> 

pour un texte qui doit être visuellement distinct.

Et pour le gras, utilisez :

<b> or <strong>

Par exemple :

<b>Bold Text</b>

ou

<strong>I'm of special importance.</strong>

Où trouver des polices HTML ?

Que vous souhaitiez utiliser un hébergeur de polices tiers ou les télécharger, vous devez savoir où se trouvent les meilleurs endroits pour trouver des polices. Il existe des centaines de distributeurs, mais une bonne poignée d’entre eux sont connus pour être des sources fiables d’obtention de polices. En voici quelques-uns :

Vous hébergez vos propres polices ? Notre hébergement optimisé pour les performances comprend un CDN qui prend en charge HTTP/2, avec une bande passante gratuite incluse. Consultez nos offres

google fonts

Google Fonts

Le top 10 des polices HTML

Il existe des milliers de polices pour le web, mais par où commencer ? Voici dix polices HTML simples qui s’intègrent parfaitement à tout site web. Elles sont toutes web safe et devraient donc fonctionner sur presque tous les appareils. Elles constituent également d’excellentes polices de secours.

Si vous avez besoin de quelque chose d’un peu plus excitant, nous avons de nombreux articles sur les polices cursives, les polices de calligraphie et les polices modernes.

1. Arial

Un exemple de la police Arial.

Un exemple de la police Arial.

Arial est la plus connue de toutes les polices de caractères. Ce n’est pas la plus belle, mais elle est simple et utile dans de nombreuses situations.

2. Times New Roman

Times New Roman est également une police extrêmement courante. Elle est idéale si vous gérez un site plus formel. Cette police à empattement n’est pas particulièrement excitante, mais elle n’est pas non plus distrayante.

3. Palatino

palantino

Un exemple de la police Palantino.

Palatino vous est peut-être familière, car elle est souvent utilisée pour l’impression de livres. Aujourd’hui, il s’agit d’une élégante police de caractères numérique incluse par défaut sur de nombreux appareils.

4. Verdana

Verdana est connue pour être très facile à lire, et elle continue d’être très belle, même en grande taille. Cette police sans serif est une bonne alternative à Arial.

5. Courier New

Courier New

Un exemple de la police Courier New.

Rappelant le texte des vieilles machines à écrire, Courier New est un excellent design monospace pour les sites qui veulent un look démodé mais lisible.

6. Calibri

calibri

Un exemple de la police Calibri.

Calibri est une police sans empattement simple et agréable, fournie en standard avec des programmes tels que Microsoft Office. Toutefois, il s’agit d’une police propriétaire, qui n’est souvent prise en charge que par les systèmes d’exploitation Windows.

7. Georgia

georgia

Un exemple de la police Georgia.

Cette police à empattement arrondi est inspirée de la police Garamond, une police similaire sûre pour le web. Si vous avez besoin d’une police formelle, mais pas aussi sérieuse que Times New Roman, c’est un bon choix.

8. Garamond

garamond

Un exemple de la police Garamond.

Tout comme Palatino, Garamond est une police classique souvent utilisée pour l’impression de livres. Bien qu’elle ait été mise à jour pour les systèmes d’exploitation modernes, elle reste assez démodée.

9. Didot

didot

Un exemple de la police Didot.

L’espacement minimal des lettres de cette police à empattement lui donne un aspect et une sensation uniques. Vous pouvez la trouver sur la plupart des appareils Apple.

10. Tahoma

tahoma

Un exemple de la police Tahoma.

Cette police propre a servi de police par défaut pour les anciens systèmes d’exploitation Windows. Son aspect plus audacieux lui permet de se démarquer suffisamment sans être distrayant.

Assurez-vous que votre site est non seulement beau mais aussi qu'il fonctionne correctement avec l'aide de ces polices sûres pour le web ✨Click to Tweet

Résumé

Il est important de choisir des polices web qui auront un bel aspect sur votre site web, seront lisibles et personnifieront votre marque. Il existe plusieurs sites où vous pouvez installer des polices gratuites ou télécharger des polices sous licence payantes. Nous vous proposons quelques exemples de bonnes polices pour commencer.

Vous n’êtes pas obligé de vous en tenir aux polices ennuyeuses et sûres que vous voyez partout sur Internet depuis des décennies. Grâce aux polices de secours, vous pouvez choisir la typographie que vous aimez et définir une police de secours à utiliser si elle ne se charge pas.

Que vous utilisiez ces polices HTML sur votre site web, dans des e-mails ou sur votre logo, veillez à effectuer de nombreux tests pour que votre site reste lisible et que la typographie s’intègre bien au reste de votre design.


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 28 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.