Puis-je utiliser une police différente sur une version traduite ?

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

Vous avez en effet la possibilité d'utiliser une police différente sur votre ou vos versions traduites en utilisant Google fonts.

Pour ce faire, vous pouvez suivre les étapes ci-dessous :

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 devrait afficher certaines informations dans le panneau de droite.
Notez que vous pouvez sélectionner plusieurs styles, comme des poids de police différents, par exemple

Ensuite, dans ce panneau, sélectionnez @import au lieu de "link" Vous devriez voir quelque chose comme ceci :

Copiez le contenu présent à l'intérieur des balises style mais sans les balises : donc dans ce cas :

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap') ;

Et collez-le sur votre Weglot Dashboard > Settings >Language Switcher > Custom CSS:

Lorsque c'est fait, vous pouvez passer à la deuxième partie.

2. Ajoutez du CSS pour afficher la police

Retournez dans le panneau de droite de la police Google et copiez la CSS rule, dans notre exemple :

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

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

html[lang="shortcode"] body {font-family: "YOUR_FONT"!important;}

Il suffit de les remplacer :

- "YOUR_FONT" par la police que vous voulez utiliser pour la langue traduite
Dans notre exemple, la police est Roboto, donc :

html[lang="shortcode"] body {font-family: 'Roboto', sans-serif!important;}

- Le code de la langue en fonction de votre propre langue traduite (voir les codes présents ici : Langues disponibles)
Par exemple, si vous voulez changer la police de caractères pour la langue espagnole, vous pouvez utiliser :

html[lang="es"] body {font-family: "YOUR_FONT"!important;}

Enfin, cliquez sur " Enregistrer les modifications", et c'est fait