Skip to main content

On jase de polices web (trucs et suggestions)

Lorsque vous créez un projet sur le web, il y a de fortes chances que vous utilisiez des polices personnalisées. Par personnalisées, lire ici autre-que-arial-verdana-et-compagnie 🤪. Que ce soit en lien avec une image de marque ou selon la vision du web designer, plusieurs raisons peuvent motiver ce choix.

Voici donc un méli-mélo de trucs et de suggestions.

Hébergez les polices localement dans votre projet

Say what? Il existe plusieurs services de distribution de polices web. Les plus connus étant Google Fonts et Adobe Fonts. Ces services offrent gratuitement ou sous forme d'abonnement l'accès à des milliers de polices qui peuvent ensuite être utilisées dans votre projet. Disons qu'à première vue, ça l'air alléchant! Effectivement, mais vous pouvez faire encore mieux.

1. Évitez d'aller emprunter chez le voisin

Pour commencer, un service externe nécessite un appel à un autre serveur lors du chargement de votre site (ou application). Cela ajoute un délai, qui retardera - si le serveur est de bonne humeur 😁 - le téléchargement des polices.

Pour résumer, c'est un peu si avant de couper votre gazon, vous deviez aller sonner chez votre voisin, prendre sa tondeuse et l'amener chez vous.

2. Contrôlez sa façon d'afficher (Be the boss)

Il existe la propriété CSS font-display qui permet d'éviter que vos polices web bloquent le rendu de votre page lors du chargement. Selon une valeur que l'on détermine, votre site sera affiché avec une police standard disponible sur votre appareil et sera remplacée par vos polices web lorsque celles-ci seront prêtes.

Les services externes permettent d'utiliser ces propriétés, mais avec un contrôle mitigé. Par exemple, Adobe Fonts a offert la valeur swap qu'à l'été 2020. Plusieurs années après son utilisation généralisée. En misant sur des services externes, il faut accepter le fait de laisser certaines options - avantageuses - au bon vouloir de ces services.

Faites une pierre, deux coups > encouragez une fonderie

En hébergeant vos polices web à même votre site, cela ouvre un monde de possibilité! OK, j'exagère un peu à peine. Mais vous n'êtes plus obligé de choisir parmi les polices sous licence avec des services externes. Plusieurs fonderies dans le monde créent des polices de caractères magnifiques qui possèdent des versions pour les ordinateurs et pour le web (Coups de coeur pour Swiss Typefaces et Atipo Foundry).

Extrapolons un peu pour paniquer s'amuser

2025, Adobe Fonts est vendu à Ikea qui veut utiliser toutes ses polices dans ses livrets d'instructions interminables et ainsi, laisser dans le néant les milliers d'utilisateurs mensuels. Wait, c'est du délire ça ! Bien sur cher lecteur. Mais l'exemple - exagéré ici - s'est vu plusieurs fois en techno par le passé. Confier un élément aussi important de sa marque, de son identité visuelle ou de son projet web à un service externe est parfois risqué. On a vu par le passé certaines polices être retirées du catalogue de Google Fonts. Le risque est faible, mais pensez à la tondeuse de votre voisin s'il déménageait. Oupsy!

Mais...c'est cher ?

Pas nécessairement. Il y a des fonderies (et des plateformes web) qui en offrent de tous les prix. Il faut savoir que ce sont souvent des polices de qualité, qui permettront à votre projet de se démarquer. Les prix sont fixés selon la grosseur de votre entreprise et/ou du projet. On peut s'en tirer entre 50$ et plusieurs centaines de dollars. 🔔 Discloser : on parle ici d'un projet d'envergure régionale, pas d'une application qui a des millions de visiteurs par mois. Si c'est le cas, le prix ne devrait plus être un concern 😁 (du moins, je vous le souhaite!).

Pensez performances et bonnes pratiques

Pour terminer, voici en rafale quelques trucs.

  • Préloadez les polices dans le <head> de votre projet.
  • Allez-y molo sur le nombre et le style de polices. On est sur le web là, ce n'est pas une brochure.
  • Ne jamais convertir une police desktop en format web (woff2). Il en résulte très souvent une police à la hauteur de ligne bizarre, à un poids élevé. Achetez la version web, ne cheapez pas sur ça (et sur le dos des créateurs).
  • Utilisez la valeur swap ou optionnal pour la propriété font-display
  • Évitez les scripts qui remplacent les polices. Les navigateurs gèrent très bien les swap de polices. On n'est plus en 2017. Been there, done that. 👊
  • Un FOUT(Flash Of Unstyled Text) n'est pas nécessairement une mauvaise chose. Mieux vaut une page qui affiche très très rapidement avec un FOUT qu'une page qui charge en 2 secondes en attendant des polices.