Créer une déclaration CSS @font-face depuis des polices

Indiquez la famille, un ou plusieurs fichiers de police avec leur format, ainsi que la graisse et le style. Le résultat est déterministe, prêt à copier et respecte votre ordre afin que les formats modernes précèdent les fichiers de repli.

Décrivez les fichiers dans l’ordre où le navigateur doit les essayer

Commencez par le nom public de la famille que vous utiliserez dans la propriété font-family de votre application. Ajoutez ensuite chaque source sous forme d’un enregistrement distinct comprenant un chemin et une indication de format. L’ordre compte : le navigateur parcourt la liste src de gauche à droite et retient la première ressource compatible. Il est courant de placer un fichier WOFF2 compact avant un fichier WOFF de repli. Le générateur conserve strictement cet ordre ; il ne trie pas, ne déduit rien, ne télécharge et n’inspecte aucun fichier. Les chemins peuvent être relatifs, comme /fonts/newsreader.woff2, ou être des URL complètes. La valeur format devient une indication CSS explicite et doit donc correspondre au fichier réel. Les guillemets et barres obliques inverses sont échappés dans les chaînes CSS. Les valeurs vides et les caractères susceptibles de rompre un descripteur sont refusés, plutôt que de produire une règle qui semble correcte mais échoue dans la feuille de style. Une source au minimum est indispensable, car une règle @font-face sans src exploitable ne peut charger aucune police.

Faites correspondre la graisse et le style au fichier

Les descripteurs font-weight et font-style indiquent au navigateur les demandes auxquelles cette face peut répondre. Ils doivent décrire les données du fichier, et non un rendu visuel que le navigateur devrait synthétiser. Pour une police statique normale, la graisse 400 et le style normal sont habituels. Un fichier italique conserve généralement la même graisse avec italic, tandis qu’un gras peut employer 700. Une police variable peut accepter une plage telle que 100 900 si le fichier contient réellement cet axe. Le générateur accepte du texte CSS au lieu de limiter ces champs à quelques choix, ce qui autorise les valeurs classiques et la syntaxe valide des polices variables. Il retire les espaces extérieurs et rejette les retours à la ligne, accolades et points-virgules qui permettraient de sortir du descripteur. Il ne vérifie pas si le fichier binaire contient la graisse ou le style déclaré. Créez une règle distincte pour chaque face statique et conservez le même nom de famille pour les fichiers apparentés. Le mécanisme normal de sélection CSS choisira alors la bonne face sans modifier les déclarations de tout votre site.

Copiez le résultat ou intégrez-le à votre chaîne de construction

La sortie contient une règle CSS mise en forme, ainsi que la famille normalisée, le nombre de sources, la graisse et le style. Copiez la valeur css dans une feuille de style avant les sélecteurs qui utilisent la famille, ou appelez le service depuis un script qui assemble vos ressources typographiques. La règle produite se limite à la famille, aux sources, à la graisse et au style. Elle ne devine pas les propriétés facultatives font-display, unicode-range, size-adjust, ascent-override, descent-override ou les réglages de fonctionnalités, car ces choix dépendent de votre stratégie de chargement, de la couverture des glyphes et des métriques. Ajoutez-les ensuite si nécessaire. L’outil n’effectue aucune requête réseau et ne vérifie pas qu’un chemin répond ; testez donc la feuille finale dans les navigateurs pris en charge et surveillez le panneau réseau pour repérer une ressource absente ou un type MIME incorrect. La sérialisation déterministe facilite les projets partagés : une même entrée produit toujours la même sortie, la priorité reste vérifiable et une liste vide échoue immédiatement. L’usage dans le navigateur est gratuit ; une requête automatisée par API coûte $0.002.