How can I use a different font on a translated version?

In this article, you'll see how to change the font displayed on your translated version(s)

You indeed have the possibility to use a different font on your translated version(s) using different methods with Google fonts.

In order to do that, you can follow the steps below:

1. Select your font and style on Google fonts

For example, in the picture below, the font is "Roboto" and the selected style is "Light 300":

Selecting a style should display some information on the right-side panel.
Note that you can select several styles such as different font weights for example

Then, on this panel, select @import instead of "link" You should see something like this:

Copy the content present inside the style tags but without the tags: so in this case:

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

And paste it on your Weglot Dashboard > Settings > Language Switcher > Custom CSS:

Once it's done, you can switch to the second part

2. Add custom CSS to display the font

Go back to the Google font right-side panel and copy the CSS rule, in our example it's:

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

You just have to add the code below in your Weglot Dashboard > Settings > Language Switcher > "Custom CSS":

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

You just have to replace:

- "YOUR_FONT" by the font you want to use for the translated language
In our example, the font is Roboto, so:

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

- The language shortcode according to your own translated language (see the shortcodes present here: Available Languages)
For example, if you want to change the font for the Spanish language, you can use:

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

Finally, click on " Save changes", and it's done: