Comparatif des solutions de gestion des polices de caractères sur le web
J'aime4
Lorsqu'on crée une site ou une page web, on a souvent, ou
notre client, envie d'utiliser autre chose que les polices de
caractères par défaut. Il existe plusieurs alternatives avec leurs
inconvénients. Lisez le tableau comparatif ci-dessous pour faire le
choix qui vous convient le mieux.
Principaux aspects à inspecter
Compatibilité
Si vous avez besoin que votre site web est un bon rendu sur la
plupart des navigateurs (sur les iPad, les plateformes mobiles ou
les vielles versions de navigateurs), il faudra regarder en détails
la section compatibilité.
Flash de texte non stylé (FOUT)
Pendant un court instant la page affiche la police de caractère
par défaut du navigateur, avant de se rafraîchir avec la font de
votre choix. Pour éviter ce comportement désagréable vous devez
choisir une solution qui se "charge rapidement"
Standard CSS qui permet de définir des police de caractères non standard.
Librairie CSS avec une API Javascript optionnel qui permet de servir des polices de caractères.
La technologie utilisé est @font-face mais Google permet de simplifier son accès et s'assure que la licence de la police de caractère est compatible pour une utilisation sur un site web. La police est servi par les serveurs de Google.
L'API Javascript permet de contrôler la manière dont la police doit être chargé et permet de s'intégrer avec les polices TypeKit.
Service permettant d'utiliser un ensemble de polices payantes ou libre de droit. Les polices de caractères sont servis par leur serveurs. Ce service est similaire à Google Font API (basé sur @font-face), mais ce service permet d'utiliser plus de police moyennant un abonnement.
Service permettant de choisir parmi des milliers de police.
Similaire à Typekit mais utilise uniquement CSS pas de JavaScript.
Similaire à Google Font API. Ce service utilise la technologie
@font-face. Les polices de caractères sont hébergés sur
leur serveurs.
Librairie javascript qui parcours le texte pour le remplacer par des dessins dans un canvas / VML.
Librairie javascript qui parcours le texte pour le remplacer par des dessins dans un canvas / VML.
Librairie javascript qui parcours le texte de la page web, pour le remplacer par un composant Adobe Flash.
Librairie javascript qui parcours le texte pour le remplacer par des images générées par un script PHP.
Utilisation d'un éditeur d'image pour créer des images avec du texte.
Utilisation d'une liste de police de caractères qui est généralement présent dans la plupart des environnements (OS/navigateurs)
+ l'accessibilité est conservé
+ supporte unicode
+ supporte toutes les variations de style sur la police
+ la police est servis par Google ce qui permet de décharger votre serveur et si le service est beaucoup utilise la font peut déjà être dans le cache du navigateur ce qui accélère encore le rendu
+ l'accessibilité est conservé
+ supporte toutes les variations de style sur la police
+ large sélection de police
+ les polices sont servi par les serveurs de typekit
+ large sélection de police professionnelles
+ police servi par des serveurs sur Amazon Cloudfront
+ large sélection de police
+ les polices sont servi par les serveurs de kernest
+ le rendu est homogène à travers tous les navigateurs
+ on peut sélectionner les caractères à inclure dans le fichier de police généré pour rendre le fichier plus léger
+ les variations de style de police sont harmonises à travers les différents navigateurs. (text-shadow...)
+ le rendu est homogène à travers tous les navigateurs
+ compatible avec tous les navigateurs graphiques
+ compatible avec tous les navigateurs graphiques
+ pas de limitations typographique
+ léger (rien de plus à télécharger)
Inconvénients
- il n'y a pas un seul format de fichier commun pour assurer la compatibilité de partout
- nombre de police limité
- ensemble de caractère de la font limité
- paiement annuel
- paiement mensuel
- sélection du texte impossible
- à cause de la performance, cette technique est approprié surtout pour les titres, menus...
- certains effets nécessite des adaptations (text-decoration, :hover...).
- sélection du texte impossible
- nécessite flash
- lent à afficher
- problèmes avec flash/adblocker
- sélection du texte impossible
- consommation de bande passante importante
- nécessite PHP/GD coté serveur
- sélection du texte impossible
- nécessite de créer une nouvelle image pour chaque texte.
- bandwith consuming
- nombre de police limité
Font licensing issue
nécessite d'avoir les droits de la police
Google diffuse seulement de police libre de droits
l'abonnement couvre le prix des licences
pour utiliser les font payantes
l'abonnement couvre le prix des licences pour utiliser les font
payantes servi par les serveurs de WebINK
l'abonnement couvre le prix des licences pour utiliser les font
payantes
nécessite d'avoir les droits de la police
nécessite d'avoir les droits de la police
l'inclusion de la police est parfois autorisé pour flash
Avis utilisateurs et commentaires
What is the faster solution (page loading) ? Quelle solution la plus rapide sur le chargement de la page ?