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-familyexample
Georgia, serifVoix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Palatino Linotype », « Book Antiqua », Palatino, serifVoix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Times New Roman », Times, serifVoix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis

Sans-Serif

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

Monospace

Polices à espacement régulier
font-familyexample
« Courier New », Courier, monospaceVoix ambiguë d’un cœur qui, au zéphyr, préfère les jattes de kiwis
« Lucida Console », Monaco, monospaceVoix 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 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
SolutionFacilité d’utilisationPoids des scriptsCompatibilitéChoix de police
Safe Web Fontaucunaucuntotaletrès limité
Cufonexpérimentétrès lourdIE8+, FF 3.5+, Safari 3.2+, Opéra, Chromeillimité
@font-face (CSS3)simplemoyen à très lourdIE9+, Firefox, Opera, Chrome, Safari, Androidillimité
Google Fonttrès simpleléger à moyenIE6+, FF 3.5+, Safari 3.1+, Chrome 4.0+, Opéra 10.5+, iOS 4.2+, Android 2.2+630
Adobetrès simplemoyen à lourdIE6+, 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.

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 disponibles sur ces bibliothèques.

Commentaires

Articles qui pourraient vous intéresser