[Resolved] WPML Font

[Afreen]

I discussed to the wpml support as I need to change the font of the Arabic translated version and they said me to get support from the theme management to give you the css code where you can place it on the additional css section.

Can you please support me to change the font of my website arabic version, website link is mentioned on the private information

[David]

Hi there,

did you resolve the issue ? I see an ‘Arabic’ font loading on the link you provided. Let me know.

[Afreen]

Everything is working perfect, what I need is to change the font.
How do I do it can u send me the css code

[Afreen]

For 2 days I am looking for the answer as I need to change the font in the Arabic version of my website, Please help me out send me the CSS code to implement on the theme.

[Elvin]

Hi there,

I’ve checked the link and the site is already in arabic as shown here – https://share.getcloudapp.com/OAu4E9oD – the contents are arabic.

To clarify: Are you trying to change the font-family used on the site if it’s in arabic?

If so, can you tell us what font-family should be used? For CSS writeup.

[Afreen]

Thanks, Elvin, You understand what I need and Yes, I want to change the font family, can be Possible to replace the existing form with this font tye https://fonts.google.com/noto/specimen/Noto+Kufi+Arabic?subset=arabic

[David]

First make sure you’re using the new typography manager.
See here about updating an existing site to that:

https://docs.generatepress.com/article/switching-to-dynamic-typography/

You can check in Customizer > Typography. If it is enabled you will see the Font Manager. Then:

1. Under Font Manager > Add Font, and select your Arabic font from the list.
2. Under Typography Manager, Add new Typography, from the Target Element List select > Custom.
2.1 In the Enter custom CSS selector. field add the following:

html[lang="ar"] body

2.2 then select your font and set the other styles eg. font size etc.

This should now apply that font when viewing the Arabic language version.

[Afreen]

Really worked 🙂

One Issue is still the menu in the Arabic version has not changed the font I chose, How to make the same?

[David]

Awesome 🙂
Add a new Typography and select Custom again, and add this in the custom CSS selector field:

html[lang="ar"] .main-navigation a

And select your font and styles.

[Afreen]

Perfect too good.

On the English version of the menu the “OFFER” I did the square outline but it’s not display the same on the arabic version.

[David]

Use the method provided here:

https://docs.generatepress.com/article/adding-buttons-navigation/

that way you just need to add the nav-button class to the menu items that require that style.

[Afreen]

As I mentioned David, In the English version the box around the Offer is working but not in arabic version. Please see both version on the private information.

[David]

If you follow the steps in that document then it will work on both languages.

[Afreen]

David, Thank you very much 🙂

[David]

Glad to be of help!

[Author]

Posts