Aperçu des polices

La plupart des aperçus de polices sur le web affichent toujours la même courte liste de polices « sûres pour le web » — une liste que vous connaissez déjà, et qui ne dit rien des polices réellement installées sur votre machine. Cette page prend le problème par l'autre bout : elle part de votre propre système.

Trois moyens d'y faire entrer une police. Les familles génériques (system-ui, sans-serif, serif, monospace) fonctionnent dans tous les navigateurs. « Lire les polices locales » énumère, via l'API Local Font Access du navigateur, toutes les polices installées sur cet appareil et les place dans le sélecteur — elles s'affichent immédiatement, car les tracés sont déjà sur votre machine et rien n'est téléchargé. Ou bien téléversez un fichier de police (TTF, OTF, WOFF ou WOFF2) : la page l'enregistre pour cette session, ce qui permet de vérifier une police de marque sous licence sans l'installer.

Choisissez une police, saisissez votre texte, puis réglez le corps, la graisse, le style, l'interlettrage, l'interligne, les couleurs et l'alignement. La ligne du jeu de caractères montre le comportement des chiffres et de la ponctuation, et le bloc CSS est prêt à copier — avec le squelette @font-face lorsque la police active provient d'un fichier téléversé.

Ni votre texte ni vos fichiers ne quittent le navigateur.

Deux API du navigateur sans rapport entre elles travaillent ici, et leur comportement diffère nettement.

L'énumération des polices installées passe par l'API Local Font Access : window.queryLocalFonts() renvoie un enregistrement par fonte installée, avec son nom de famille, son nom complet, son nom PostScript et son style. La page regroupe ces enregistrements par famille, les trie et les confie au sélecteur. Le rendu ne nécessite aucun téléchargement : le nom de famille est transmis directement au CSS et les tracés sont fournis par le système d'exploitation, exactement comme pour votre propre feuille de style. Chromium propose l'API après une autorisation unique ; Safari et Firefox ne l'implémentent pas du tout, aussi l'entrée y est-elle masquée plutôt que laissée à l'échec.

Le téléversement passe par l'API Font Loading : le fichier est lu dans un ArrayBuffer, confié à new FontFace(family, buffer), chargé, puis ajouté à document.fonts. Dès lors, la police se comporte comme n'importe quelle autre famille et peut être référencée par son nom dans le CSS.

• queryLocalFonts() exige un contexte sécurisé (HTTPS ou localhost) et rejette la demande avec NotAllowedError si la boîte de dialogue d'autorisation est fermée ; le panneau signale les deux cas au lieu de lever une exception.
• Une même famille peut apparaître sous plusieurs styles. La liste est dédupliquée par nom de famille : chaque police n'apparaît donc qu'une fois, et le réglage de style choisit la fonte.
• FontFace accepte TTF, OTF, WOFF et WOFF2. Un fichier corrompu ou d'un format non pris en charge fait échouer load() ; la page le signale au lieu de laisser une entrée cassée dans le sélecteur.
• Les téléversements sont conservés en mémoire uniquement — aucune requête réseau, aucune écriture disque, aucun localStorage. Voilà pourquoi ils ne survivent pas à un rechargement.
• Les familles génériques sont résolues en interne par le navigateur et n'ont besoin d'aucune API : elles restent donc disponibles là où les deux autres voies sont fermées.