written by
Kevin Palombo

Astuces pour ajouter une typographie sur Webflow ?

Webflow 4 min
ajouter une typographie sur Webflow
Photo by David Clode on Unsplash

Tu penses qu’aucune des typographies de base sur Webflow ne convient à ton projet ? Dans ce cas, il faudra que tu en importes de nouvelles. Mais est-ce possible ? Oui, je te rassure, c'est tout à fait possible. Comment ? Je te dévoile quelques astuces pour ajouter une typographie sur Webflow.

Si tu fais partie de ceux qui ne viennent sur mon site que pour la première fois, tu dois savoir que tu peux avoir un compte Webflow gratuitement. Tu peux tout de suite gérer deux projets. Tes fonctionnalités seront évidemment limitées, mais sache que tu peux déjà réaliser un beau projet. Tu peux même aller jusqu’à changer la typographie de ton site.

ajouter une typographie sur Webflow
Photo by David Clode on Unsplash

Comment changer la typographie de ton site ?

Changer la typographie d’un site webflow se fait en quelques clics seulement ! Pour cela, tu n’as qu’à cliquer sur l’icône sous forme de pinceau en haut, à droite de ton écran. De là, tu peux modifier la typographie du site à ta convenance. Mais comme je te l’ai dit au début, il se peut qu’aucune des typographies ne te convienne. C’est là que tu dois en importer de nouvelles.

Comment ajouter une typographie sur Webflow ?

Pour modifier cette option, tu dois te rendre sur le tableau de bord de ton compte. Là encore, il y a 3 manières d’ajouter une typographie sur Webflow :

  • choisir des typographies de Google Fonts
  • sélectionner des typographies de Adobe Fonts
  • importer des typographies téléchargées sur internet

Il y a une vidéo Youtube dans laquelle je décris cela en bas de l'article. Soutenez-moi en vous abonnant à la chaine YouTube "Happy Desk Design"

ajouter une typographie sur Webflow
Photo by Clara Cordero on Unsplash

Pour le premier cas, tu te facilites beaucoup la tâche ! Pas besoin de télécharger des polices de Google Fonts pour ajouter une typographie sur Webflow. En effet, un API de Google est installé sur Webflow. Mais encore, il se met à jour automatiquement et régulièrement. Aucun risque de manquer les tendances du moment !

Parlons maintenant de Adobe Fonts. Webflow a aussi un API de cette plateforme. Cela signifie que toutes les typographies que tu as dans ton compte Adobe sont directement disponibles sur Webflow.

Enfin, la troisième option concerne les typographies personnalisées ou celles téléchargeables sur internet. Pour ce cas-ci, il suffit d’importer directement les typographies concernées. Il faudrait d’abord les télécharger en fichier ZIP. Ensuite, tu dois le décompresser. Tu cliques alors sur le bouton importer, et là, tu peux sélectionner plusieurs typographies. Elles sont de suite utilisables.

ajouter une typographie sur Webflow
Photo by Pedro Lastra on Unsplash

Je te donne une astuce supplémentaire

Tu connais Font Awesome ? Il s’agit d’une bibliothèque d'icônes gratuites et payantes (mais à mon avis, tu peux vraiment te passer du compte payant ; tu as tout ce dont il te faut avec le gratuit).

Si tu veux ajouter des icônes sur ton site sans devoir importer des images en csv, tu n’as qu’à passer par Font Awesome (sachant que les images vont alourdir ton site web). Et pourtant, tu pourras encore modifier le format de l’icône, son style, son épaisseur, sa taille, sa couleur…

Comment donc l’utiliser ? Utilise la barre de recherche pour chercher l’icône qui t’intéresse. Prenons un exemple : tu veux une flèche ? Dans ce cas, écris ce nom dans la barre de recherche (en anglais, parce que le site est en anglais). Comme je l’ai mentionné tout à l’heure, tu n’as pas besoin de le télécharger en svg. Copie l’icône, et ensuite, colle-la quelque part sur ton site (là où il doit se mettre).

Au début, il apparaîtra sous forme de carré. Ne t’inquiète pas, c’est tout à fait normal. Maintenant, sélectionne cette icône, et choisis la typographie que tu veux (celle que tu viens d’importer, par exemple). Ton icône apparaîtra alors sous sa vraie forme. Enfin, comme toutes les polices, tu pourras enfin changer sa couleur, sa taille, etc.

ajouter une typographie sur Webflow
Photo by Poseidon X on Unsplash

Conclusion
Le design d’un site web dépend de plusieurs choses : couleurs, structure… Mais le choix des typographies n’est pas en reste. Cet élément peut même faire toute la différence ! D’où l’importance de bien la choisir. Heureusement pour toi, tu peux désormais ajouter une typographie sur Webflow (n’importe laquelle).

Tu ne rates jamais aucun de mes articles (et vidéos), mais tu ne t’es pas encore décidé à t’inscrire sur Webflow ? C’est peut-être le moment, tu ne crois pas ? ;)

YouTube : Comment ajouter une typographie sur Webflow ?

Reviens sur cette page chaque fois que tu voudras. As-tu trouvé des idées que j'aurais oubliés? Si oui, quels sont-ils? Laisse un commentaire ci-dessous ou envoi un mail à hello@happydesk.be
Kevin Palombo, Gérant de Happydesk
Web Design Business