Police en Base64

Comment convertir une police en Base64

1. Déposez un fichier .woff2, .woff, .ttf ou .otf dans la zone, ou choisissez-le avec le sélecteur de fichiers.
2. Sortie en est déjà réglé sur CSS @font-face. Choisissez Data URI ou Base64 brut si vous écrivez la règle vous-même.
3. Copier la sortie et collez-la dans votre feuille de style.

Pour un fichier nommé Inter-Bold.woff2, le résultat ressemble à ceci, données raccourcies :

@font-face {
  font-family: "Inter-Bold";
  src: url("data:font/woff2;base64,d09GMgABAAAAA...") format("woff2");
  font-display: swap;
}

Le nom font-family vient du nom du fichier, sans l’extension, les caractères autres que les lettres, les chiffres, les espaces, - et _ étant remplacés par des espaces. Renommez-le avec le nom de famille utilisé dans votre CSS, et ajoutez font-weight et font-style si vous intégrez plusieurs styles d’une même famille.

Indications format() et types MIME

L’indication format() permet au navigateur d’écarter, sans les télécharger, les sources qu’il ne sait pas utiliser. Avec une seule source intégrée, elle compte moins, mais une indication que le navigateur ne reconnaît pas lui fait quand même écarter la source. L’outil déduit l’indication du type MIME indiqué par le navigateur, et certains systèmes associent aux polices des types inhabituels. Si un OTF ressort avec format("truetype"), remplacez-le par opentype.

Un WOFF2 qui enveloppe une police TrueType commence par d09GMgABAAA ; un WOFF2 qui enveloppe des contours CFF commence par d09GMk9UVE8.

Garder les polices intégrées légères

Le Base64 est un tiers plus gros que le fichier de police, et il se trouve dans du CSS qui bloque le rendu. Un test avec une police d’icônes de 77 160 octets en WOFF2 a produit 102 880 caractères de Base64, qui doivent tous être téléchargés avant que quoi que ce soit ne s’affiche sur la page.

Pour que l’intégration en vaille la peine :

• Utilisez le WOFF2. Pour la même police, il est bien plus petit que le TTF ou l’OTF.
• Réduisez la police à un sous-ensemble. Supprimer les glyphes inutiles, par exemple toutes les écritures sauf le latin, peut retirer l’essentiel de la taille d’une grosse police. Des outils de subsetting de polices le font en ligne de commande.
• N’intégrez qu’une seule fonte. Une police de titres ou une police d’icônes utilisée au-dessus de la ligne de flottaison est une bonne candidate. Le texte courant en quatre graisses est mieux servi par des fichiers séparés que le navigateur peut mettre en cache.

Les documents HTML autonomes et les exports canvas ou SVG qui doivent embarquer leur propre police sont les cas typiques où intégrer une police est le bon choix.

Vérifier une police en Base64

Si le texte s’affiche avec une police par défaut, ouvrez les outils de développement du navigateur et cherchez des erreurs de chargement de police, puis vérifiez que la data URI commence par data:font/ et que les données commencent par l’un des préfixes ci-dessus. Un fichier qui commence par PCFET0NUWVBF est une page HTML enregistrée avec une extension de police. Base64 en police décode une chaîne, affiche un aperçu des glyphes et enregistre le fichier.

FAQ