L'utilisation de polices personnalisées (webfont) se développe de plus en plus sur les sites web. notamment les sites développés en responsive design. Elles se composent d'un ou plusieurs fichiers externes (EOT, SVG, TTF, WOFF) chargés via la déclaration font-face.
L'utilisation de ces polices a même été "détournée" pour afficher des icônes, la plus connue étant Font-Awesome, popularisée par BootStrap. Mais il y a un problème de performance : quel est l'intérêt de charger des dizaines de Ko et 479 icônes pour au final utiliser 5 ou 6 icônes sur son site ?
Voici donc un petit guide pratique pour optimiser le chargement d'une police d'icônes.
Icomoon à la rescousse
Icomoon est un des outils les plus simple pour personnaliser et générer une police d'icônes. Il suffit de choisir les icônes que l'on veut intégrer : plusieurs packs sont déjà proposés et on peut mixer plusieurs packs, voire intégrer ses propres icônes. L'outil génère ensuite un fichier CSS et des fichiers pour la police. Nous avons déjà largement diminué le poids des fichiers à charger.
Aller un peu plus loin
Oui mais voila, il reste encore trop de fichiers à charger. C'est là qu'intervient le schéma Data-URI, que l'on utilisait pour les icônes images afin de supprimer une requête en intégrant directement l'image dans le fichier CSS. L'idée est la même, intégrer directement la police de caractères dans le fichier CSS. Une option disponible dans les préférences d'Icomoon : "Encode et Embed Font in CSS".
/xmedia/doc/full/embed_init_(1).png" width="540" />
On se retrouve avec un fichier CSS contenant les définitions suivantes, où les versions TTF et WOFF de la police sont directement dans le fichier CSS, la version EOT restant externe.
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot');
}
@font-face {
font-family: 'icomoon';
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAA...) format('truetype'),
url(data:application/font-woff;charset=utf-8;base64,d09GRgAB...) format('woff');
font-weight: normal;
font-style: normal;
}
On obtient au final un seul fichier CSS pour les navigateurs modernes sans besoin de charger en sus un des fichiers de fonte.
Et les anciens IE dans tout ça ?
Évidemment rien n'est aussi simple et le support des anciennes versions d'IE méritent quelques ajustements. IE7 et inférieur ont besoin de déclarations spécifiques pour pouvoir afficher correctement les icones. Là encore Icomoon vient à la rescousse avec l'option "Support IE7 and older":
/xmedia/doc/full/embed_(1).png" width="540" />
Cette option n'est toutefois pas parfaite : on se retrouve avec un fichier CSS et JS supplémentaire. Une solution plus optimisée est donc d'utiliser les commentaires conditionnels pour IE. L'idée est de créer un seul fichier CSS complet pour les versions égales ou inférieures à IE7 et une version pour les autres navigateurs.
<!--[if lte IE 7]> <link href="IE67.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="modern.css" rel="stylesheet" type="text/css" />
Une dernière astuce permet d'éviter le blocage générés par l'utilisation des commentaires conditionnels, en ajoutant un commentaire conditionnel vide au début du fichier HTML:
<!--[if IE]><![endif]-->
<html>
<head>
<title>Titre de la page</title>
<!--[if lte IE 7]> <link href="IE67.css" rel="stylesheet" type="text/css" /> <![endif]-->
<link href="modern.css" rel="stylesheet" type="text/css" />
<!--[endif]-->
...
</head>
Au final on garde les avantages des icônes vectorielles, sans les inconvénients du chargement. Ce n'est pas l'objet de cet article, mais il est vivement conseillé d'intégrer la concaténation et la minification des fichiers CSS et JS dans le process de déploiement. En pratique, voila ce que ce donne le chargement sur Chrome et sur IE7.
Tout savoir sur les fontes icônes ?
Pour aller plus loin que cette astuce et traiter encore plus en profondeur le thème des fontes icônes, je vous renvoie vers un article de Stéphanie Walter : "Créer une police d’icônes facilement à partir d’illustrations vectorielles" qui détaille le processus de conception et de modification d'une police d'icônes.
Commentaires
Tout comme Icomoon (au passage, merci pour la découverte), il existe également http://glyphter.com qui permet de créer une typographie personnalisée composée de pictogrammes à partir de différentes bibliothèques existantes.
« la plus connue étant Font-Awesome, popularisée par BootStrap »
Font-Awesome a bien initialement été conçu pour être utilisé avec BootStrap, mais je pense pas que c'est forcement grâce au framework qu'il est devenu populaire car ce dernier inclus uniquement les Glyphicons.
@LuciferX :
Je viens de tester rapidement l'outil mais il ne semble pas proposer les data-URI pour les polices générées, ni le code pour IE7.
@Seb33300 : oui en effet c'est Font-Awesome qui a été développé pour Bootstrap.
Sauf erreur de ma part le navigateur ne charge que la font qui le concerne. Ne vaut-il mieux pas charger deux fichiers plus légers (la font et le css) qu'un seul plus lourd avec un format de font qui ne sera pas utilisé ?
@Plumo : En effet la solution présentée n'est optimale que pour des polices personnalisées de petite taille, avec quelques icônes. C'est souvent le cas puisqu'un développeur n'utilise qu'une (petite) partie des icônes proposées par chaque police sur un site donné.
Si par contre le chargement complet de la police est nécessaire (Font-Awesome par exemple), le chargement par fichier externe est évidemment plus rapide!
@bigb06 : Merci pour la réponse.
Je viens de tester les deux solutions avec un set de 10 icônes. Dans le premier cas avec les fonts externes je charge environ 4ko. La seconde solution avec les fonts intégrées monte le poids à 10ko.
Vaut-il mieux faire deux requêtes serveur pour moins de poids ou une seule pour un fichier plus lourd ?
Le mieux est de tester ! http://www.webpagetest.org/
Je suis convaincu que l'intégration est la meilleure solution dans ce cas, on évite une requête supplémentaire pour 4Ko.
Je vais regarder tout ça merci d'avoir pris le temps de discuter :)
Moi j'utilisais cette technique auparavant. Mais si l'on n'est pas regardant sur une compatibilité IE8 on peut laisser tomber le système de fonts et passer directement au format SVG via des sprites css pour limiter le nombre de requêtes. C'est un chouilla plus souple et ça permet au passage d'avoir des icônes multicolores.
Pour les couleurs, on peut gérer certains effets avec les fonts, comme les dégradés, les superpositions ... Et même plus ! https://css-tricks.com/stackicons-icon-fonts/
Sinon est d'accord que dans un monde idéal utiliser des fonts pour gérer des icônes, ce n'est pas forcément très logique... ('utilisais d'ailleurs avant cela des sprites images générés au moment du déploiement). Reste que la compatibilité IE7 est pour moi une nécessité pour tout site généraliste.
Et sinon que pensez-vous de http://fontastic.me/ ?
C'est un générateur de polices parmi d'autres. Le plus important est la manière dont la(les) police(s) sont chargée(s) par le navigateur.
Merçi pour le tuto.
Très sympa, merci pour cette mine d'infos !