Skip Navigation

Home › Support › English Support › [Resolved] Split: change the font style for the translated language

[Resolved] Split: change the font style for the translated language

This thread is resolved. Here is a description of the problem and solution.

Problem:
The client needed to change the font style for the translated language and could not find an option to do so.
Solution:
We recommended using CSS code to apply different fonts for each translation. Here is an example of how to target the Arabic language:

html[lang="ar"] {font-family: "Cyrillic Barlow Condensed Reg" !important; font-size: 20px !important; font-weight: 600 !important;}

To target all paragraphs in the Arabic translation, the client should add the 

<p>

tag:

html[lang="ar"] p{font-family: "Hoverla Font ENG" !important; font-size: 24px !important;}

For targeting more HTML tags, such as paragraphs, links, and headers, the following code can be used:

html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] h1{font-family: "Hoverla Font ENG" !important; font-size: 24px !important;}

We also informed the client that custom CSS is beyond our Technical Support guidelines, but we provided these examples as a courtesy.

Please note that this solution might be irrelevant due to being outdated or not applicable to your case. If so, we encourage you to open a new support ticket. We also highly recommend checking related known issues, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins.

This is the technical support forum for WPML - the multilingual WordPress plugin.

Everyone can read, but only WPML clients can post here. WPML team is replying on the forum 6 days per week, 22 hours per day.

This topic is split from https://wpml.org/forums/forum/english-support/

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Mihai Apetrei 9 months, 2 weeks ago.

Assisted by: Mihai Apetrei.

Author Posts
April 5, 2024 at 11:19 pm #15490079

alawsT

we need to change the font style for the translated language, we could not find any option to chnage the font so would you please guide us ?
April 5, 2024 at 11:24 pm #15490082

Mihai Apetrei
Supporter

Languages: English (English )

Timezone: Europe/Bucharest (GMT+02:00)

Hi there.

In order to use different fonts for each translation you could use CSS code as in the example below:

html[lang="ar"] {font-family: "Cyrillic Barlow Condensed Reg" !important; font-size: 20px !important; font-weight: 600 !important;}

The code above is just an example and depending on your site layout you’ll need to apply the CSS code and just play with the values.

For example, if you want to target all the paragraphs inside the site, this means that we will need to add into the mix the <p> tag (which is the HTML tag for the paragraph).

html[lang="ar"] p{
font-family: "Hoverla Font ENG" !important;
font-size: 24px !important;
}

If you would like to target more HTML tags, you can use something like this:

html[lang="ar"] p, html[lang="ar"] a, html[lang="ar"] h1{
font-family: "Hoverla Font ENG" !important; 
font-size: 24px !important;
}

Please note that custom CSS is out of the purpose of our Technical Support guidelines, but I still wanted to share with you some examples that you can follow.

Kind regards,
Mihai Apetrei