Générateur de webfonts — TTF et OTF vers WOFF2 avec CSS

Vérifiez d’abord la licence de votre police

Les polices sont des logiciels, et leur licence détermine ce que vous pouvez en faire. De nombreuses licences commerciales autorisent uniquement un usage sur ordinateur, ou facturent séparément l’usage web, et certaines interdisent carrément la conversion du fichier. Cela peut s’appliquer même si vous avez acheté la police. Les licences libres, comme la SIL Open Font License, autorisent en général l’usage web, mais avec leurs propres conditions. Lisez votre licence avant de convertir. devpack ne vérifie pas les licences : vous êtes entièrement responsable de l’utilisation de vos polices et des fichiers que vous créez.

Quel format de police choisir ?

WOFF2 est le bon choix pour presque tous les sites web. Il offre la meilleure compression et fonctionne dans tous les navigateurs modernes. Ajoutez WOFF seulement si vous devez prendre en charge d’anciens navigateurs. Les formats TTF et OTF sont des formats destinés au bureau, et ils sont généralement beaucoup plus lourds.

Qu’est-ce que le subsetting de police ?

Une police peut contenir des milliers de caractères que votre site n’affiche jamais. Le subsetting les supprime, ce qui peut réduire fortement la taille du fichier et accélérer vos pages. Lorsque vous choisissez des jeux de caractères, le CSS reçoit aussi un unicode-range : les navigateurs ne téléchargent la police que lorsqu’une page en a besoin. Conservez toutes les langues utilisées sur votre site, car les caractères supprimés seront remplacés par une autre police.

Que contient le ZIP ?

• Un dossier fonts avec vos fichiers convertis.
• stylesheet.css avec une règle @font-face par police, incluant la graisse et le style.
• demo.html, une page qui montre chaque police en fonctionnement.
• FONT-INFO.txt, avec les informations de copyright et de licence déclarées par chaque police.

Options avancées

• Polices variables : réduisez un axe, supprimez-le ou créez des graisses statiques comme 400 et 700. Le CSS reçoit la plage de graisses appropriée.
• Fonctionnalités OpenType : conservez le jeu standard, gardez-les toutes, ou cochez exactement celles que vous voulez.
• Métriques verticales : harmonisez la hauteur de ligne entre les plateformes, ou définissez vos propres valeurs.
• Repli assorti : ajoute une police système redimensionnée pour que le texte bouge moins au chargement de votre webfont, ce qui améliore votre score de décalage de mise en page.
• Code : obtenez des règles @font-face, un extrait d’utilisation, des balises de préchargement ou une configuration Tailwind CSS.

Quelle valeur de font-display choisir ?

swap affiche immédiatement le texte dans une police de secours, puis le remplace par votre police une fois chargée. optional évite ce changement et le décalage de mise en page, mais sur une connexion lente, votre police peut ne jamais s’afficher. Pour accélérer encore, préchargez votre police principale avec une balise link rel="preload" et testez la page avec le Test de vitesse de page.

Utiliser des webfonts dans Webflow

Téléchargez les fichiers WOFF2 et importez-les dans Paramètres du site → Polices → Polices personnalisées. Webflow génère le CSS pour vous. Besoin de code personnalisé dans votre projet ? L’outil HTML et CSS vers Webflow peut vous aider.

Aussi recherché comme : générateur de webfont, générateur web font, alternative font squirrel, générateur font-face, ttf vers woff2, otf vers woff2, subsetting de police, convertir police en webfont.

Outils complémentaires : Générateur de webfonts

• Compresseur d'images — Réduisez vos photos et visuels jusqu’à 90 % sans perte visible de qualité, selon l’image et les réglages.
• Minifieur CSS — Collez une feuille de style pour la réduire instantanément.
• Boutons CSS — Choisissez parmi 24 boutons CSS animés : remplissages, bordures, halos, reflets et effets d’enfoncement 3D.
• Générateur d’animation CSS — Concevez vos animations CSS sur une vraie timeline de keyframes.