How to use a different font on translated versions

In this article, you'll learn 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 each language's aesthetic and readability standards. 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

Let's take an example with the "Roboto" font.

When reaching Google Fonts, you can use the search feature to look for "Roboto":

Then, you can select the font you want by clicking on it.

On the new tab, you can see the different styles applied to the font selected:

To have this font on your translated website, you first need to click on the "Get font" button in the top-right:

After that, you can use the "Get embed code" option:

On this new page, you can select several styles via the panel on the left.

On the panel on the right, select "Web" and "@import" instead of "link."

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

@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');

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"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {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"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {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"] :is(h1,h2,h3,h4,h5,h6,span,p,a) {font-family: 'Roboto', sans-serif !important;}

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

Conclusion: Customizing fonts for different language versions of your website is straightforward and can substantially impact 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.