Les polices de caractères pour Internet, safe webfonts et alternatives

En Webdesign, l’utilisation de polices de caractères peut se révéler être un véritable casse-tête pour l’affichage sur tous les supports et dans tous les navigateurs. Quelles sont les font utilisables et comment les ajouter sur votre site Internet pour maximiser la compatibilité et réduire l’utilisation des textes-images pénalisantes pour le référencement naturel ?

La difficulté dans l’usage des polices de caractères sur les sites réside dans le fait qu’elles sont interprétées par le navigateur sur la base des polices installées sur l’ordinateur du visiteur.

Ces polices proviennent de plusieurs logiciels :

  • votre système d’exploitation et de sa version : Windows, MacOS, Linux, Android, Windows Mobile, iOS, RIM, etc.
  • vos logiciels installés : Microsoft Office, logiciels Adobe, Libreoffice, Openoffice, etc.
  • vos polices additionnelles : comme par exemple celles téléchargées sur dafont

Les polices sûres (Safe Web Fonts)

Si la police de caractère apportée par les propriétés des feuilles CSS, alors votre navigateur va chercher une police qu’il considère comme similaire. Malheureusement, la similarité est parfois très incertaine et provoque des chevauchements, des décalages de texte parce que ces polices n’ont pas toutes la même taille.

Tout d’abord lorsque l’on appelle une police en CSS, on appelle généralement plusieurs polices alternatives qui seront utilisées en cas d’absence de la police précédente, ci dessous le tableau complet des différentes polices de caractères considérées comme sûres.

Avantages : Compatibilité maximale

Inconvénients : choix limité

Serif

Polices avec Serif
font-family example
Georgia, serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Palatino Linotype », « Book Antiqua », Palatino, serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Times New Roman », Times, serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis

Sans-Serif

Polices Sans-Serif
font-family example
Arial, Helvetica, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Arial Black », Gadget, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Comic Sans MS », cursive, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
Impact, Charcoal, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Lucida Sans Unicode », « Lucida Grande », sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
Tahoma, Geneva, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Trebuchet MS », Helvetica, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
Verdana, Geneva, sans-serif Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis

Monospace

Polices à espacement régulier
font-family example
« Courier New », Courier, monospace Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Lucida Console », Monaco, monospace Voix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis

Polices alternatives

Lorsque l’on veut imposer des polices alternatives même si le visiteur ne l’a pas sur son ordinateur, il est possible de les importer sur le site pour qu’elles soient affichées normalement sans passer par les textes-images (c’est à dire la création d’une image contenant un texte avec la police de caractères souhaitée) qui ne seront pas reconnues en tant que textepar les moteurs de recherche.

Méthode Cufon :

Cette méthode permet d’importer n’importe quelle police de votre ordinateur et de la réutiliser en police de substitution sur votre site Internet en utilisant les fichiers générés par Cufon.

Attention : Un très grand nombre de police de caractères sont sous licence. Ce n’est pas parce que vous l’avez installée, qu’elle est présente sur votre ordinateur que vous avez le droit de l’utiliser sur vos sites Internet, consultez la documentation associée.

Avantages : Utilisation de n’importe quelle police (sous conditions de licence).

Inconvénients : Importation de scripts très lourds surtout si vous utilisez plusieurs variantes (regular, bold, condensed, etc.)

Méthode @font-face

Cette méthode fait intervenir le CSS3 pour appeler le fichier de police directement dans le navigateur.

Attention : Un très grand nombre de police de caractères sont sous licence. Ce n’est pas parce que vous l’avez installée que vous avez le droit de l’utiliser sur vos sites Internet, consultez la documentation associée.

Avantages : Facile d’utilisation

Inconvénients : Polices chargées sur le site qui peut en ralentir les performances.

Méthode Google Fonts :

Le service Google Fonts dispose d’une liste de plus de 600 polices de caractères. L’appel de la police se fait soit en CSS soit en Javascript.

Avantages : Gratuit, très simple d’utilisation.

Inconvénients : chargement d’un script qui peut ralentir votre site Internet.

Méthode Adobe :

Adode Edge permet un service similaire avec près de 500 polices utilisables gratuitement, il peut être compléter par des polices payantes avec TypeKit, la lience d’utilisation est très variable, elle dépend du nombre de police, du nombre de pages vues par période et du nombre de domaines.

Avantages : Simple d’utilisation.

Inconvénients : chargement d’un script qui peut ralentir votre site Internet.

Conclusion

Pensez à vérifier les polices et leur compatibilité avec l’alphabet utilisé. De très nombreuses polices ne prennent pas en charge les accents, les caractères spéciaux et les chiffres.

Comparatif des solutions
Solution Facilité d’utilisation Poids des scripts Compatibilité Choix de police
Safe Web Font aucun aucun totale très limité
Cufon expérimenté très lourd IE8+, FF 3.5+, Safari 3.2+, Opéra, Chrome illimité
@font-face (CSS3) simple moyen à très lourd IE9+, Firefox, Opera, Chrome, Safari, Android illimité
Google Font très simple léger à moyen IE6+, FF 3.5+, Safari 3.1+, Chrome 4.0+, Opéra 10.5+, iOS 4.2+, Android 2.2+ 630
Adobe très simple moyen à lourd IE6+, FF 3.5+, Safari 3.1+, Chrome 4.0+, Opéra 10.5+, iOS 4.2+, Android 2.2+ 500 (ou quasi illimité)

Pour toutes les méthodes faisant appel à des scripts ou des solutions externes nous vous recommandons vivement de limiter le nombre de polices de caractères à utiliser et leurs variantes pour ne pas pénaliser le temps de chargement de votre site Internet et donc son référencement dans les moteurs de recherche. Vérifiez également leur lisibilité selon les tailles d’écran.

Nous vous déconseillons cufon (et les services de ce type), il est préférable d’utiliser Google Font ou Typekit (Adobe) et de ne faire appel au CSS3 que lorsque la police a utiliser n’est pas disponible sur ces bibliothèques.

Certaines polices peuvent avoir des rendu légèrement différents de leur version installée et selon certains navigateurs le poids (épaisseur) n’est pas pris en charge de la même manière.