How to use a different font on translated versions

In this article, you'll find out how to change the font displayed on your translated versions.

Introduction: When presenting your website in multiple languages, it can be essential to ensure that the typography aligns with the aesthetic and readability standards of each language. Using different fonts for translated versions can significantly enhance user experience and accessibility. This article will guide you through the simple process of customizing fonts for your translated content using Google Fonts and Weglot.

1. Select your Font and Style on Google Fonts

2. Add Custom CSS to Display the Font

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.

Then, on this panel, select "@import" instead of "link"

Copy the content inside the "style" tags (without the tags themselves):

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

And paste it into 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

Return to the Google Fonts right-side panel and copy the CSS rule. In our example, it is:

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

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

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

Replace "YOUR_FONT" with the font you want to use for the translated language. For example, for Roboto, it would be:

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

Replace the language shortcode according to your translated language (see the shortcodes here: Available Languages). For instance, to change the font for Spanish, use:

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

Finally, click on "Save changes", and you're all set!

Conclusion: Customizing fonts for different language versions of your website is a straightforward process that can have a substantial impact on the user experience. By following these steps, you can ensure that your website not only speaks your audience's language but also presents it in a visually appealing and culturally appropriate manner. Remember to save your changes in the Weglot Dashboard to see the immediate impact on your site.