Comment utiliser une police différente sur les versions traduites

Dans cet article, vous apprendrez comment modifier la police affichée sur vos versions traduites.

Introduction: Lorsque vous proposez votre site web en plusieurs langues, il est essentiel de veiller à ce que la typographie respecte les normes esthétiques et de lisibilité propres à chaque langue. L'utilisation de polices différentes pour les versions traduites peut considérablement améliorer l'expérience utilisateur et l'accessibilité. Cet article vous guidera à travers le processus simple de personnalisation des polices pour votre contenu traduit à l'aide de Google Fonts et de Weglot.

1. Sélectionnez votre police et votre style sur Google Fonts

Prenons l'exemple de la police « Roboto ».

Une fois sur Google Fonts, vous pouvez utiliser la fonction de recherche pour trouver « Roboto » :

Ensuite, vous pouvez sélectionner la police que vous souhaitez en cliquant dessus.

Dans le nouvel onglet, vous pouvez voir les différents styles appliqués à la police sélectionnée :

Pour avoir cette police sur votre site web traduit, vous devez d'abord cliquer sur le bouton "Get font" en haut à droite :

Ensuite, vous pouvez utiliser l'option "Get embed code" :

Sur cette nouvelle page, vous pouvez sélectionner plusieurs styles dans le panneau de gauche.

Dans le panneau de droite, sélectionnez "Web" et "@import" au lieu de "link".

Copiez le contenu des balises "style" (sans les balises elles-mêmes) :

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

Puis collez-le dans votre Dashboard Weglot > Votre projet > "Language Switcher Settings" (Paramètres du sélecteur de langue) > "Custom CSS" :

Une fois que c'est fait, vous pouvez passer à la deuxième partie.

2. Ajouter un CSS personnalisé pour afficher la police

Retournez dans le panneau latéral droit de Google Fonts et copiez la règle CSS. Dans notre exemple, il s'agit de :

font-family: "Roboto", sans-serif;

Il vous suffit d'ajouter le code suivant dans votre Weglot Dashboard > Settings > Language Switcher > "Custom CSS" :

html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: "YOUR_FONT" !important;}

Remplacez "YOUR_FONT" par la police que vous souhaitez utiliser pour la langue traduite. Par exemple, pour Roboto, ce serait :

html[lang="shortcode"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: "Roboto", sans-serif !important;}

Remplacez le shortcode de la langue par celui de la langue traduite (voir les shortcodes ici : Langues disponibles). Par exemple, pour changer la police de caractères pour l'espagnol, utilisez :

html[lang="es"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: "Roboto", sans-serif !important;}

Enfin, cliquez sur "Save changes" et le tour est joué !

Conclusion: La personnalisation des polices pour les différentes versions linguistiques de votre site web est simple et peut avoir un impact substantiel sur l'expérience de l'utilisateur. En suivant ces étapes, vous pouvez vous assurer que votre site Web ne parle pas seulement la langue de votre public, mais qu'il la présente également d'une manière visuellement attrayante et culturellement appropriée. N'oubliez pas de sauvegarder vos modifications dans Weglot Dashboard pour voir l'impact immédiat sur votre site.