Comment utiliser une police différente sur les versions traduites

Dans cet article, vous découvrirez 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

2. Ajouter un CSS personnalisé pour afficher la police


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


Par exemple, dans l'image ci-dessous, la police est "Roboto" et le style sélectionné est "Light 300" :

La sélection d'un style doit permettre d'afficher des informations dans le panneau de droite. Notez que vous pouvez sélectionner plusieurs styles, par exemple différentes graisses de police.

Ensuite, dans ce panneau, sélectionnez "@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:wght@300&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"] body {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"] body {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"] body {font-family: 'Roboto', sans-serif !important;}

Enfin, cliquez sur "Enregistrer les modifications", et le tour est joué !


Conclusion: La personnalisation des polices pour les différentes versions linguistiques de votre site web est un processus simple qui 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.

Cela a-t-il répondu à votre question ? Merci pour le retour d'information Il y a eu un problème pour soumettre votre commentaire. Veuillez réessayer plus tard.

Vous avez encore besoin d’aide ? Contactez-nousContactez-nous