Les polices de caractères compatibles avec tous les navigateurs

Accueil / Articles / Les polices de caractères compatibles avec tous les navigateurs
Les polices de caractères compatibles avec tous les navigateurs

Article publié le 5 décembre 2012  Mot(s) clé :   Graphisme  Enregistrer au format PDF   Version PDF

Où l’on présente en quelques mots les principes pour utilser dans un site web des polices de caractère originales. Avec Font Squirrel, vous avez un outil pour générer tous les formats d’une police de caractère, indispensable pour qu’elle soit lisible dans tous les navigateurs.

Plusieurs problèmes qui se succèdent lorsque l’on veut utiliser des polices de caractère un peu originales dans un site web.

Si l’on reprend les choses depuis le début, en toute logique, on ne peut afficher dans une page web que les polices de caractères qui se trouvent déjà dans l’ordinateur de l’utilisateur. Évidemment, les polices livrées avec Windows, Mac OS et Linux ne sont pas les mêmes. Il n’y a qu’un petit nombre de polices communes aux différentes plateformes.

Depuis HTML5 et CSS3, on peut intégrer à son site web des polices de caractères, que l’on appelle dans la feuille de style, et qui sont lues par le navigateur. (de la même façon que l’on appelle les images, et qu’on les intègre dans la page web) ; On utilise pour cela l’instruction @font-face .

1er problème : tous les navigateurs n’intègrent pas la fonction @font-face

On peut lire sur cette page le fonctionnement de @font-face, et on voit que les anciennes versions d’Internet Explorer ne comprennent pas l’instruction @font-face

2ème problème : tous les navigateurs ne savent pas lire les mêmes famille de polices.

C’est un peu comme si certains navigateurs pouvaient lire le format ".jpg", et pas le format ".png". Ici, on explique bien la compatibilité des polices en fonction des navigateurs. Pour qu’une police de caractère soit lisible sur tous les navigateurs, il faut donc proposer les différents formats possibles pour une même police dans votre feuille de style.

3ème problème : à moins de les acheter, vous ne pouvez utiliser que des polices libres de droit.

Certaines polices de caractère peuvent être utilisées pour un site non commercial mais pas pour un site commercial, etc. A vous donc de trouver la police qui convient.

4ème problème : une fois la police libre de droit trouvée, il se peut qu’elle n’existe que sous un seul format.

Et là, vous commencez à respirer par le nez, on voit que ça chauffe, etc. C’est un peu rageant. Parfois, les graphistes avec lesquels vous travaillez sont "gentils" : ils conçoivent un site avec une belle police Mac, et pour vous aider, ils vous envoient la police Mac (qui n’est utilisable que sur un Mac, donc elle ne sert à rien)

MAIS : il y a une solution très intéressante : fontsquirrel, qui vous propose un @font-face generator Et ça c’est bien. Vous uploadez votre police, et @font-face generator vous créé tous les formats nécessaires ; Il vous envoie même la feuille de style avec @font-face rédigé.

Donc, globalement, on réussit à créer des sites web avec de belles polices.

Lectures recommandées :

- The essential guide to @font-face

- CSS3 @font-face rule

- Font Squirrel

[EDIT]

le 7 mai 2013, j’ai voulu utiliser Font Squirrel pour générer une police de caractère, mais le site ne m’a jamais jamais généré le kit. J’ai donc essayé Font2Web, qui m’a donné de bons résultats.

Lire aussi l’article sur le rendu compliqué des générateurs de font web.

Ces articles peuvent vous intéresser