Utiliser la fonctionnalité Variable Font de Webflow

La Webflow Conf' 2022, nous l'avait promis et la voici enfin; la fonctionnalité variable font est dès à présent disponible en version Beta dans le Designer.

Polices Statiques vs Polices Variables (Variable Fonts)

Qu'est-ce qu'une police statique ?

Les polices statiques sont déclinées en plusieurs variantes. Dans une même police, nous pouvons avoir différents types de styles :

• Plusieurs types de graisse avec une valeur bien définie (par exemple Thin (100), Regular (400), Semibold (600), Bold (700) pour ne citer qu'eux)
• Un style italic / Condensed / etc. ou non
• etc.

Il faut savoir que ces styles peuvent se combiner (par exemple Roboto Italic Bold vs Roboto Italic).

Le problème des polices statiques vient du nombre de fichiers qu'il faut pour toutes les déclinaisons qui existent (si je souhaite Roboto Thin, Roboto Regular, Roboto Semibold et Roboto Bold, il me faut 4 fichiers).

Ce nombre de fichiers important peut alourdir votre site, le temps de chargement de vos pages (performances web) et donc impacter votre référencement naturel (SEO).

De plus, ces polices ne permettent pas d'aller chercher des valeurs de graisse précise. Nous sommes limités aux valeurs des fichiers que l'on importe.

Si nous reprenons notre exemple du dessus avec la police Roboto, nous aurons les valeurs de graisse 100, 400, 600 et 700, mais pas 550 ou 275 par exemple.

Qu'est-ce qu'une police variable ?

Les variable fonts (ou polices variables) permettent à travers 1 seul et même fichier (1 seule et même police) de regrouper l'ensemble des variantes de styles de la famille de police.

Grâce à ce fichier nous pouvons changer la valeur de graisse très précisément (De 0 à 1000). Il est également possible de modifier les variations des différents styles qui existent dans le fichier de la police.

Autre avantage d'une police variable : les transitions. Grâce à ce type de font, nous pouvons faire des animations lissées (smooth) entre différents styles de polices. Par exemple, nous pouvons avoir un effet au survol de la souris (on hover) sur une font et changer la graisse sans que la transition ne soit brutale.

L'adaptation personnalisée de ces polices peut également avoir des bienfaits en matière d'accessibilité web en modifiant légèrement la font pour plus de lisibilité.

Comment utiliser les Variable Fonts sur Webflow

Étape 1 : Importer un fichier de police variable

La première étape de ce tutoriel va consister à venir uploader un fichier de police personnalisé dans votre projet Webflow. Cependant, il sera nécessaire d'importer un fichier de police variable. Pour ce faire, vous pouvez télécharger des polices variables sur plusieurs sites comme Google Font ou Dafont.

La plupart des variable fonts contiennent la mention "wght" dans le nom du fichier.

Découvrez notre tutoriel pour ajouter des polices personnalisées dans Webflow

Étape 2 : Ajouter la font à un de vos éléments

Vous pouvez maintenant sélectionner un des éléments de votre page et dans ses styles, venir choisir la police variable que vous avez uploadée.

Étape 3 : Choisir une variation de la police

Il ne vous suffit plus qu'à :

• Ouvrir le déroulant "More type options" dans la section "Typography" du panneau de styles
• Cliquer sur l'icône "+" à côté de "Font Variations"
• Personnaliser votre variation

Et c'est tout, vous pouvez avoir un style très précis pour des éléments de votre page grâce à cette nouvelle fonctionnalité Beta.

Vous pouvez également modifier la variation de police "on hover" (au survol) pour créer des effets / animations sympathiques sur votre site web (il faudra appliquer une transition "all" pour que l'effet soit lissé).

On vous laisse vous amuser avec cette nouvelle fonctionnalité de style de Webflow, mais pour aller plus loin, vous pouvez découvrir notre article pour trouver la bonne typographie pour votre site internet.