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 présentez votre site web en plusieurs langues, il peut être essentiel de veiller à ce que la typographie soit conforme aux normes esthétiques et de lisibilité de chaque langue. L'utilisation de polices différentes pour les versions traduites peut améliorer considérablement l'expérience utilisateur et l'accessibilité. Cet article vous guidera dans 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".

Lorsque vous accédez à 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;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

Et collez-le dans votre Weglot Dashboard > Settings > Language Switcher > "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.