How to add custom font to translated page? Farsi/Arabic fonts?

Resolved hosnakachooee
(@hosnakachooee)

2 years, 5 months ago

I used TranslatePress to create a Farsi/Persian version of my English website.
But I want to add a custom font to the Persian version. I couldn’t find the setting for it in the WP dashboard, is there a code that I’m supposed to use?

I used Elementor to make my website, but the custom font capability would only apply to the English page/version.

The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

Plugin Support Alex
(@alexcozmoslabs)

2 years, 5 months ago
Hi,

You can achieve this using a bit of CSS that you can add in Appearance –> Cuztomize –> Additional CSS. See the following as an example:
```
@import url('https://fonts.googleapis.com/css?family=Padauk&display=swap');
body.translatepress-ro_RO
```
Basically, you need to import the font and use the .translatepress to define the language parameter. In the example above, it was used for the Romanian language, but in your case, you will specify the language code of your custom language.
Thread Starter hosnakachooee
(@hosnakachooee)

2 years, 5 months ago
@alexcozmoslabs

Hello, thank you for the reply.

@import url(' @import url('https://fonts.googleapis.com/css2?family=El+Messiri&display=swap'); body.translatepress-fa_FA

the text above is what I wrote in the additional CSS tab, it works on the homepage but doesn’t on the other pages. What should I do and how can I make it apply to all the texts on the website?

Thanks so much!
- This reply was modified 2 years, 5 months ago by Steven Stern (sterndata).
Plugin Support Alex
(@alexcozmoslabs)

2 years, 4 months ago
You also need to specify the font-family property with the ‘El Messiri’ value.
```
@import url(' @import url('https://fonts.googleapis.com/css2?family=El+Messiri&display=swap'); 
body.translatepress-fa_FA {
font-family: 'El Messiri';
}
```
Thread Starter hosnakachooee
(@hosnakachooee)

2 years, 4 months ago

Hello, thank you for the reply.

The problem still remains, I copied the code above but it only applies to the homepage (some parts of it).

What should I do?

This is the website daanokia.com
As you will see, the font is different on the homepage but the rest of the website has the default font.
Plugin Support Alex
(@alexcozmoslabs)

2 years, 4 months ago
Hi,

It was a typo. Notice the @import url(‘ @import url(‘https:….
Try with this one:
```
@import url('https://fonts.googleapis.com/css2?family=El+Messiri&display=swap'); 
	
body.translatepress-fa_FA {
font-family: 'El Messiri';
}
```
I tested with the above code and it worked for all pages.

If the issue persists, please open a ticket on our website, https://translatepress.com/support/, because we will need to investigate this in detail.
- This reply was modified 2 years, 4 months ago by Alex.
Plugin Support Alex
(@alexcozmoslabs)

2 years, 4 months ago
Since already 5 days have passed since you received instructions about the opened topic, and you did not return with an update, we will mark this ticket as successfully resolved.
If you have other questions regarding TranslatePress, we recommend you create another ticket.
- This reply was modified 2 years, 4 months ago by Alex.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘How to add custom font to translated page? Farsi/Arabic fonts?’ is closed to new replies.

Tags