Comment ajouter une police Google Fonts sur Webflow ?
Apprenez à ajouter une police Google Fonts sur Webflow : intégration native, import CSS et optimisation des graisses.
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment ajouter une police Google Fonts à votre projet Webflow.
| Méthode | Avantage | Quand l'utiliser |
|---|---|---|
| Intégration native Webflow | Simple, optimisée | Polices disponibles dans la liste Webflow |
| Import via CSS @import | Contrôle des variantes | Polices Google non listées nativement |
| Upload WOFF2 custom | Performances maximales | Polices custom ou Google en auto-hébergement |
1. Utilisez l'intégration native Webflow
Dans le Designer, sélectionnez un élément texte. Dans le panneau Typography, cliquez sur le sélecteur de font. La liste inclut directement les polices Google Fonts les plus populaires. Sélectionnez votre police et choisissez les graisses nécessaires.
2. Ajoutez une police Google Fonts non listée
Pour une police absente de la liste native, allez sur fonts.google.com, sélectionnez votre police et les graisses voulues. Copiez le code <link> fourni et collez-le dans Project Settings > Custom Code > Head. La police sera ensuite disponible dans Webflow en saisissant son nom dans le champ Font Family.
3. Limitez les graisses chargées
Chaque graisse est un fichier supplémentaire. N'importez que les graisses que vous utilisez réellement (généralement Regular 400 et Bold 700 suffisent). Dans l'URL Google Fonts, modifiez le paramètre wght@400;700 selon vos besoins.
Conclusion
Google Fonts s'intègre en quelques clics dans Webflow. Pour les polices custom : uploader une police custom sur 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.
