Skip Navigation

Home › Support › English Support › [Resolved] Translated language font

[Resolved] Translated language font

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

Problem:
You are developing a site and want to use a different font for the Arabic-translated pages using WPML, without having to change the font for each text manually.
Solution:
We recommend using custom CSS to specify different fonts for each language. Here is an example of how you can set a specific font for all Arabic content:

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

To target all paragraphs in Arabic, you can use:

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

If you need to apply this to more HTML tags, such as paragraphs, links, and headers, you can extend the CSS 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 beyond our Technical Support guidelines, but these examples should guide you in the right direction.

If this solution does not apply to your case, or if it seems outdated, we highly recommend checking related known issues at https://wpml.org/known-issues/, verifying the version of the permanent fix, and confirming that you have installed the latest versions of themes and plugins. If further assistance is needed, please open a new support ticket at WPML support forum.

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.

Tagged: 

This topic contains 1 reply, has 2 voices.

Last updated by Mihai Apetrei 11 months ago.

Assisted by: Mihai Apetrei.

Author Posts
July 26, 2024 at 9:31 pm #16009827

muaweyahG

Background of the issue:
I am developing a site and want to change the font for the Arabic-translated pages using WPML. I want to use a different font for the Arabic content than the one used globally for the site.

Symptoms:
No specific issue or error message mentioned.

Questions:
Is it possible to have two global fonts, one for each language, to avoid changing the font for each text manually?
July 26, 2024 at 9:40 pm #16009857

Mihai Apetrei
WPML Supporter since 03/2018

Languages: English (English )

Timezone: Europe/Bucharest (GMT+03: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