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

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.