Comment ajouter des polices sur Webflow

Accueil
>
Astuces Webflow
>
Comment ajouter des polices sur Webflow
Recevez toutes nos astuces Webflow et accédez à nos contenus privés gratuitement
Bien reçu !
Vous recevrez un email pour créer votre compte dans quelques instant
Oups ! Apparemment, votre email est incorrect
Table des matières
  • This is some text inside of a div block.
  • This is some text inside of a div block.
Obtenir le clonable

Apprendre à ajouter des polices à Webflow vous permettra de voir le style de votre design directement dans le designer de Webflow (exit les appels de polices compliqué donc).

Vous souhaitez mettre des paillettes dans votre vie ? Allez ainsi ajouter vos polices préférées à Webflow.

Commencez par vous rendre dans vos paramètres (project settings).

Qu'il s'agisse d'un ficher, ou bien que vous désiriez importer une police depuis Google Font ou bien Adobe, vous devrez vous rendre dans les paramètres de votre site. Vous pouvez y accéder directement depuis le dashboard, ou bien en cliquant sur "Add Font" en haut du menu déroulant vous permettant de sélectionner votre police.

Comment ajouter une Google Font à votre site internet Webflow ?

C'est la première option disponible sur la page, mais également la plus performante pour votre site.

  • Commencez par choisir la police qu'il vous faut. Vous pouvez vous rendre sur le site de Google directement en cliquant ici. Gardez bien en tête que les polices farfelues rendent potentiellement la lecture compliquée
  • Sélectionnez la police dans le menu déroulant
  • Sélectionnez ensuite uniquement les variants dont vous avez besoin (attention si vous sélectionnez trop de fonts, cela ralentira votre site internet)

Comment ajouter une police personnalisée à Webflow

Ca peut effrayer un petit peu au premier regard, mais c'est aussi facile que d'ajouter des polices Google Fonts.

  • Comme précédemment, assurez-vous que la police fonctionnera avec les éléments de votre site et votre marque.
  • Cliquez ensuite sur "Upload Fonts" et importez le fichier depuis votre ordinateur
  • Modifiez ensuite le nom de la/des polices en vous assurant de respecter la même orthographe (pour les voir apparaitre sous le même nom dans votre Designer peu importe leur graisse (weight)).
  • Paramétrez ensuite les paramètres d'affichage de cette police - Elle sera automatiquement configurée sur swap par Webflow, ce qui est une bonne chose.
  • Paramétrez vos polices de secours (fallback fonts). En cas de retard de chargement, ou bien pour n'importe quelle autre raison, ces polices seront utilisées pour garantir à vos utilisateurs que le contenu sera bien visible. Il est donc essentiel d'en configurer.
  • Retourner dans le designer et sélectionnez cette nouvelle police dans votre projet.

Pour finir sur l'ajout de police sur Webflow

Bien que Webflow propose nativement des polices, c'est souvent bien utile de pouvoir ajouter celles qui vous intéressent le plus en provenance d'autres plateformes.

Maintenant que vous savez comment ajouter des polices à Webflow, il est donc temps d'aller jouer avec vos nouvelles fonts pour en faire quelque chose.

Notez qu'il est également possible d'intégrer des polices depuis Adobe font directement pour la conception de votre site web, mais la mise à jour d'une collection est parfois (souvent) bugguée, on vous recommande donc d'éviter sauf si vous n'avez pas le choix.

N'hésitez pas à faire preuve de créativité et à nous envoyer un petit mot pour nous montrer ce que vous avez réalisé.