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
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
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
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.
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.