La création de son site internet passe toujours par une phase d’UX puis d’UI pour aboutir à une maquette plus ou moins complète qui contiendra surement quelques pictogrammes autrement nommés icônes. Mais, pour que ceux-ci aient un bon rendu, quelque soit le navigateur, encore faut-il connaitre les techniques pour intégrer les fonts d’icônes et ce, de manière webperfée. Il y a quelques temps déjà, nous avions vu comment optimiser l’usage des Google fonts. Aujourd’hui nous allons voir comment optimiser l’usage de police d’icônes.
Qu’est-ce qu’une font d’icônes ?
Pour utiliser des icônes sur un site web, il existe plusieurs solutions :
- une bibliothèque d’icônes où chaque icône a son propre fichier image,
- un sprite d’images où toutes les icônes sont regroupées au sein de la même image de façon a réduire les appels,
- ou une police où les caractères sont des icônes.
Les avantages d’une font d’icône par rapport aux autres techniques :
- Le poids : en effet les fichiers de font sont plus légers que des images.
- La modularité : les fonts sont modifiables par CSS, vous pouvez donc agrandir ou changer la couleur de l’icône sans avoir besoin de refaire une image.
Cette technique a toutefois un inconvénient, elle n’est utilisable qu’avec des icônes monochrome.
Comment créer une font d’icônes ?
Il existe un tas d’outils en ligne qui proposent des bibliothèques de pictogrammes prêt à l’emploi et qui vous permettent de créer vos fonts :
Je ne m’attarderai pas sur les plus et les moins de chaque outil, ce n’est pas le sujet de cet article. Dans notre agence web rennaise, nous utilisons plutôt icomoon.io. Cet outil propose les 2 modes connus pour générer une font d’icônes.
La méthode “classique”
Chaque icône est associée à une glyphe de la police qui correspond donc à un caractère. Généralement icomoon propose des caractères unicode en commençant par e900. Dès lors si vous incluez le caractère e900 dans un texte en utilisant cette font vous afficherez donc l’icône que vous désirez.
Viens ensuite l’export pour l’exploiter dans vos pages. L’outil va donc vous générer une font et un fichier css (ou scss selon vos réglages) qu’il vous suffira de lier à vos pages.
Dans cette feuille de style, une classe .ico est créé sur laquelle est précisée la police à utiliser (forcément celle créée ci-dessus). On y trouve aussi une classe par icône qui définit le caractère unicode à appeler pour afficher la glyphe correspondante. Exemple :
.ico-fleur:before {
content: "e900";
}
Il suffira donc d’appelé cette icone en html comme ceci :
<span class="ico ico-fleur"></span>
Ce qui signifie que vous avez autant de classe dans le code css que d’icône à utiliser.
La méthode des ligatures
Une police de caractère peut embarquer ce qu’on appelle des ligatures. Une ligature est la fusion de deux ou plusieurs glyphes en une seule. Par exemple, le o et le e qui se transforme en œ. Techniquement une police de caractère web peut embarquer plusieurs types de ligatures :
- Normales : qui définissent une règle orthographique. Ne pas les utiliser est une faute comme dans le mot nœud.
- Courantes : qui rendent plus “esthétiques” la suite de 2 caractères comme pour éviter leur chevauchement.
- Historiques : spécifiques à un rendu selon des règles anciennes de la langue utilisée.
- Optionnelles : spécifiques à la police elle-même où une ligature peut remplacer un ou plusieurs caractères soit un ou plusieurs mots par une seule et même glyphe.
C’est cette dernière qui nous intéresse. Avec celle-ci, icomoon vous propose de faire correspondre votre icône à une ou plusieurs suites de caractères (idéalement un ou plusieurs mots). Exemple :
Ici, le mot “fleur” ou le mot “artwaï” sera remplacé par l’icône si vous utilisez la police générée.
Le contenu de la feuille de style est différent de la méthode classique. Il y a toujours une classe .ico pour définir la font à utiliser mais on précise aussi sur celle-ci d’activer les ligatures optionnelles qu’on appelle “discretionary-ligatures” ou “dlig”.
.ico {
font-family: 'artwai', sans-serif;
font-variant-ligatures: discretionary-ligatures;
font-feature-settings: "dlig";
}
Enfin, il n’y plus besoin de définir une classe par icône. On utilisera au choix deux implémentations.
Avec un attribut
Dans la feuille de style, un sélecteur est défini comme ceci :
.ico[data-ico]:before{
content : attr(data-ico);
}
Avec la valeur attr(data-ico) vous reprenez la valeur définit dans l’attribut data-ico. Dès lors, il suffit d’implémenter l’icone comme ceci :
<span class="ico" data-ico="fleur"></span>
Exemple in situ :
Directement en texte
L’autre implémentation d’utiliser le texte directement dans l’html comme un contenu :
<span class="ico" >fleur</span>
Exemple in situ : fleur
NB : ici le picto est sélectionnable et peut-être copié en tant que texte.
Avantages de la méthode avec ligature
Premièrement, j’aime quand le code a du sens et est facilement lisible. Dès lors, un mot sera toujours plus clair qu’un caractère unicode.
Deuxièmement, le fichier de font est un peu plus lourd (et encore on parle d’1 ou 2 ko en plus) mais le gain dans la css est énorme vous n’avez plus que 2 sélecteurs là où il y avait une classe par icône. Imaginez le gain sur une bibliothèque de 50 icônes !
Et troisièmement, vous disposez de 2 modes d’implémentations. L’un uniquement visuel et l’autre qui permet d’intégrer l’icône comme contenu textuel, donc plus accessible et mieux référencé.
Une font d’icônes perfectible…
Supprimer le FOUC
L’inconvénient d’une police d’icônes et d’une police web tout court est le FOUC (flash of unstyled content : flash de contenu sans style). Il s’agit du court laps de temps pendant lequel la page est dépourvue de la font et s’affiche soit sans les caractères soit avec une police de remplacement (selon la valeur attribué à la propriété font-display).
Dans un premier temps, il faut charger la feuille de style qui appelle la font. Google recommande, pour ce ou ces fichiers css et s’ils sont critiques pour l’affichage de la page, de soit les inclure dans le HTML soit de les charger avec le Push HTTP/2. Pour ma part comme pour ce site, la deuxième technique me donne plus satisfaction, l’HTML et le CSS restant séparés.
Ensuite, le plus simple est de précharger la police avec un preload dans l’entête HTML. Cela priorise le chargement de la font devant toutes les ressources. Le “Hic”, c’est qu’il n’y a pas qu’un seul format de font. En effet, la css propose plusieurs formats de font en fonction du support dans le navigateur. D’ailleurs, il faut prendre le soin de bien les proposer dans le bon ordre du plus léger au plus lourd c’est à dire : WOFF2, WOFF, TTF et SVG ( NB: oui je ne propose plus eot qui est un vieux format uniquement présent pour IE8 ! ).
Le bon format : WOFF2
Du coup, mettre les 4 fonts en préchargement conduit forcément à en charger 3 de trop puisqu’une seule sera utilisée. Là, pas de miracle et restons simple : il faut choisir ! Du coup, je vous recommande de précharger la plus légère et la plus utilisée : la police au format WOFF2 ! En effet, comme le confirme caniuse.com, ce format est supporté :
- depuis 2014 pour Chrome,
- depuis 2015 pour Firefox,
- et depuis 2016 pour Safari et Edge.
Pour les autres navigateurs (et ils sont guère nombreux), ils auront le FOUC mais la page reste accessible et dans sa forme originale.
Utiliser le prelaod
Pour précharger une font, il faut utiliser une balise link avec l’attribut rel = "preload" (NB : Attention, ne pas confondre le preload avec le preconnect). Voici comment cela se présente :
<link rel="preload" href="mafont.woff2" as="font" type="font/woff2" crossorigin>
Un point à souligner: vous devez ajouter l’attribut crossorigin lors de la récupération des polices, car elles sont récupérées en mode anonyme CORS ( Cross-Origin Resource Sharing : “partage de ressources entre origines multiples”). Oui, même si vos polices sont sur le même domaine que la page. Pourquoi ??? Mystère ! Mais sans cela, la font ne sera pas préchargée. En outre, l’attribut type est là pour s’assurer que cette ressource ne sera préchargée que sur les navigateurs prenant en charge ce type de fichier.
Un détail pour France Gall mais pas pour moi : il est inutile, voir contre-productif, d’utiliser une compression cotés serveur type gzip avec une police au format WOFF2 ! Par exemple la font artwai.woff2 envoyée compressée en GZIP pèse 21723 octets contre 21700 sans compression…
Et si on réduisait le nombre de polices ?
Et si on poussait l’exercice jusqu’au bout. Je constate que bien souvent un site utilise de 1 à 3 polices de caractères dédiées au texte (on se demande bien pourquoi, surtout avec les fonts variables dont je vous parlerais une prochaine fois). et 1 police d’icônes. La bonne nouvelle, c’est que nous pouvons embarquer les icônes dans une police de texte. Bref, nous pouvons fusionner une police de caractère classique avec une police d’icône grâce aux ligatures optionnelles. Cela signifie que le texte utilise des caractères normaux et quand les ligatures optionnelles sont activées, le texte affiche les icônes. La preuve par l’exemple :
Sans ligature : notre agence webperf basée à Rennes à une fleur pour logo.
Avec ligature : notre agence webperf basée à Rennes à une fleur pour logo.
Nous obtenons 2 gains qui sont à la base de la web performance,
- Le poids ! en effet le fichier combiné est légèrement plus léger que 2 fonts séparées
- Et le nombre de requêtes évidemment !
Conclusion
Comme nous aimons prouver ce que nous affirmons, sachez que le site artwai.com dispose depuis peu d’une seule police web pour sa titraille et ses icônes. Dans le détail, nous avons gagné 1 requête et 6 ko. Et en utilisant le preload, nous avons supprimé le FOUC et pour le coup, nous voyons une réelle différence à l’affichage. Et puisque certains pictos enrichissent désormais notre texte, nous avons amélioré à la fois le contenu et notre temps d’affichage, bref l’expérience utilisateur.
Je ne pense pas que la fusion de police soit nécessaire dans tous les cas, mais c’est une corde de plus à l’arc de la web performance, deux sujets auxquels nous sommes sensibles.
Question bonus
Mais si une font d’icône ne peut être utilisée qu’en monochrome, comment faisons-nous pour avoir notre logo en deux couleurs ?
Je vous laisse réfléchir, je ramasse les copies dans 2 heures.
Photo par Harpal Singh via Unsplash
