Comment uploader une police custom sur Webflow ?
Apprenez à uploader et utiliser une police custom sur Webflow : formats WOFF2, Project Settings et graisses.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment uploader et utiliser une police custom (propriétaire ou achetée) sur votre projet Webflow.
| Format | Compatibilité | Recommandation |
|---|---|---|
| WOFF2 | Tous navigateurs modernes | Format privilégié, le plus léger |
| WOFF | IE 9+ et tous modernes | Fallback pour WOFF2 |
| TTF / OTF | Natif desktop | À convertir en WOFF2 avant upload |
| EOT | IE uniquement | Obsolète, inutile en 2026 |
1. Convertissez votre police en WOFF2
Si vous avez un fichier TTF ou OTF, convertissez-le en WOFF2 avec CloudConvert (gratuit). Le WOFF2 est 30% plus léger que le WOFF et supporté par tous les navigateurs modernes.
2. Uploadez dans Webflow Fonts
Dans le Designer, allez dans Project Settings > Fonts. Cliquez sur Upload Font. Uploadez votre fichier WOFF2 (et optionnellement WOFF pour le fallback). Définissez le Font Family Name que vous souhaitez utiliser dans vos styles.
3. Utilisez la police dans vos styles
La police uploadée apparaît désormais dans le sélecteur de font du panneau Typography. Sélectionnez un élément, ouvrez le panneau Typography et choisissez votre police dans la liste.
4. Chargez toutes les graisses nécessaires
Si votre police a plusieurs fichiers de graisses (Regular, Bold, Italic...), uploadez chacun séparément dans Project Settings > Fonts. Définissez le même Font Family Name et spécifiez la graisse et le style correspondant à chaque fichier.
Conclusion
Les polices custom s'uploadent directement dans Project Settings sans code. Pour les performances : optimiser les polices dans Webflow.
bon à savoir
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
