Comment utiliser plus de 800 polices sur mon site internet ?
Les standards du web nous ont habitués à voir un peu toujours les mêmes ~20 polices de caractères sur les sites web…
Et quel dommage ! Il existe plus de 800 familles de polices de caractères gratuites et utilisables très simplement : les Google Fonts.
Mode d’emploi ici :
Les CSS des standards du Web permettent modifier les polices de caractères via la balise font-family. Par exemple :
div { font-family: Arial, Helvetica, sans-serif; }
La liste des polices reconnues par tous les navigateurs (donc susceptible de s’afficher de manière uniforme, sans rupture de votre charte graphique) est très limitée. Elle est regroupée en 3 catégories :
- les polices avec serif (ou empattements) qui sont les polices de la communication plus subjective;
- les polices sans sérif (ou « polices bâtons » sans empattements) qui traduisent une communication plus objective;
- et les polices monospace (espacement uniforme) qui sont les plus anciennes, et introduisent plutôt une communication technique.
Google a introduit depuis 2010 une petite révolution en permettant d’afficher plus de 800 polices différentes sur tous les écrans. L’affichage ne se fait plus sur la base des polices « systèmes » des-dits navigateurs, mais de polices directement hébergées sur le web.
Comment choisir une Google Font ?
Il suffit de se connecter ici : https://fonts.google.com
Vous pourrez pré-sélectionner à droites les catégories de polices : avec serif; sans serif; de type manuscrite (« Handwritting »); ou de type « Display » (à réserver pour des titres par exemple) :
Lorsque votre choix est fait, cliquez sur le petit [+] rouge en haut à droite de la police : 
Cette action fait apparaître en bandeau noir en bas de votre écran « 1 family selected » (notez que vous pouvez en sélectionner plusieurs), sur lequel vous allez cliquer pour l’ouvrir :
Comment utiliser une Google Font ?
A partir de là, le plus simple est de copier la balise <link> qui vous est proposée, puis de la coller entre la balise <head> et la balise </head> de votre page HTML :
Il vous reste à indiquer aux navigateurs à quel bloc de texte affecter cette nouvelle police. Google va même jusqu’à vous donner le code CSS à introduire dans les classes et ID de votre code ! Par exemple ici :
div { font-family: ‘Righteous’, cursive; }
NB : l’onglet « Customize » vous permet d’affiner votre choix en choisissant la taille de la police, par exemple)
That’s all folk ! 
No Responses to “Comment utiliser plus de 800 polices sur mon site internet ?”