Utiliser les polices variables

Les polices variables sont une technologie de police avancée qui permet à un seul fichier de police de contenir plusieurs styles et variations, tels que différents graisses, largeurs et tailles optiques. Contrairement aux polices traditionnelles, qui nécessitent des fichiers séparés pour chaque style (par exemple, gras, italique, condensé), une police variable peut ajuster ces caractéristiques de manière dynamique dans un seul fichier.

Les polices variables présentent plusieurs avantages par rapport aux polices traditionnelles :

• Contrôle : Avec les polices traditionnelles, vous êtes limité aux caractéristiques prédéterminées. Par exemple, vous pourriez avoir à choisir entre une graisse de 400 ou 600. Avec les polices variables, vous avez un contrôle total, vous permettant de choisir une graisse de 475 si c’est ce qui convient le mieux à votre design.
• Performance : En utilisant un seul fichier de police qui inclut toutes les variations, les polices variables peuvent réduire le nombre de requêtes HTTP et la taille globale des fichiers nécessaires pour charger différents styles de polices, améliorant ainsi les performances du site web.
• Typographie responsive : Les polices variables permettent des ajustements dynamiques de la typographie en fonction de la taille de l’écran, de la résolution ou des préférences de l’utilisateur. Par exemple, une police pourrait devenir plus condensée sur les petits écrans pour économiser l’espace ou augmenter le contraste aux petites tailles pour une meilleure lisibilité.
• Intégration CSS : Les polices variables peuvent être contrôlées en utilisant CSS. Des propriétés comme `font-weight`, `font-stretch` et `font-style` peuvent être ajustées avec des valeurs au-delà de l’ensemble fixe habituel, offrant un contrôle plus granulaire. Cela signifie également que vous pouvez ajouter des animations aux polices variables.

Ajouter des polices variables

Avant d’utiliser les polices variables, vous devez les importer en utilisant WP Admin. 

Remarque : Les polices variables ont plusieurs variables que vous pouvez utiliser pour les ajuster. La largeur et la graisse sont les deux plus couramment utilisées et ces deux sont prises en charge dans Elementor.  

Pour ajouter une police variable :

1. Localisez une police variable que vous souhaitez utiliser et téléchargez-la sur votre PC. Vous pourriez avoir besoin de décompresser le fichier.
   Les polices variables sont disponibles auprès d’un certain nombre de fournisseurs, y compris Google Fonts. Dans Google Fonts, vous pouvez vérifier la graisse et la largeur minimales et maximales en cliquant sur Type Tester et en utilisant les curseurs pour déterminer les valeurs minimales et maximales.
   
   Notez la graisse et la largeur minimales et maximales de la police. Vous en aurez besoin plus tard.
   
2. Allez dans WP Admin et naviguez vers Elementor > Polices personnalisées.
   L’écran des polices personnalisées apparaît.
   
3. Cliquez sur Ajouter nouveau.
   
4. Cliquez sur Ajouter une police variable.
   L’écran de téléchargement apparaît.
   
5. Cliquez sur Télécharger et naviguez vers l’emplacement du fichier de police.
   
6. Sélectionnez le fichier de police variable et, dans le coin inférieur droit, cliquez sur Sélectionner le fichier ttf.
   
7. Dans la zone de texte Entrer la famille de police, donnez un nom à la police.
   
8. Cochez Largeur et entrez la largeur minimale et maximale de votre police. Cette information est disponible auprès du créateur de la police.
9. Cochez Graisse et entrez la graisse minimale et maximale de votre police. Cette information est disponible auprès du créateur de la police.
   
   Note

   Vous devez définir une graisse et/ou une largeur minimale et maximale pour que la police se comporte correctement. Toutes les polices ne contiennent pas à la fois la variable largeur et graisse. Dans ces cas, cochez simplement la variable pertinente.
   
   
10. Cliquez sur Publier/Mettre à jour.
    Vous pouvez maintenant utiliser cette police dans l’éditeur Elementor.

Utiliser les polices variables dans l’éditeur Elementor

Une fois que vous avez installé les polices variables, vous pouvez les utiliser dans n’importe quel widget qui a une option de typographie. Dans l’exemple ci-dessous, nous utiliserons une police variable dans le widget Titre.

Pour utiliser les polices variables dans un widget :

1. Faites glisser un widget qui contient du texte vers la zone de travail.
   
2. Dans le panneau, sélectionnez l’option Typographie. Cette option peut généralement être trouvée dans l’onglet Style.
3. Cliquez sur l’icône crayon .
   Une liste de polices et d’options de polices apparaît.
   
4. Sélectionnez une police variable. Ces polices se trouvent en haut de la liste des polices dans une section intitulée Polices variables.
   
5. Utilisez les curseurs Largeur et/ou Graisse pour déterminer l’apparence de la police.
   Votre texte apparaît maintenant exactement comme vous le souhaitez.