Return to previous page

I am trying to change the font in RTL mode

This topic has 7 replies, 2 voices, and was last updated 7 months, 1 weeks ago ago by Jack Richardson

yaci

Participant

July 16, 2024 at 19:26

hello to the best support team 🙂
I’m trying to change the font in RTL mode via some CSS code and it worked well in the PC version but for the mobile version, it didn’t work

note: in the mobile version of a PC browser it works but in a real phone it didn’t work as you can see in screenshots

Files is visible for topic creator and
support staff only.

#405213 Copied Theme version: 9.3.15

6 Answers

Jack Richardson

Support staff

July 17, 2024 at 07:01

Dear @yaci,

I hope this message finds you well. We would appreciate your assistance in clarifying your request to ensure we address your needs accurately. Could you please provide us with the following details?

1. The URL of the page where you need the font changes to be implemented.
2. The specific section that currently has the correct font in LTR (Left-to-Right) format but requires changes to RTL (Right-to-Left) font.
3. We believe there may have been an oversight concerning the application of the .rtl class. It appears that it has been applied only once, rather than before each selector, which might be causing the issue (See screenshot attached).

Your cooperation in providing these details would greatly help us in resolving the matter efficiently.

Best regards,
Jack Richardson
The 8Theme Team

Files is visible for topic creator and
support staff only.

#405256 Copied

yaci

Participant

July 17, 2024 at 08:57

Hello
1/ there’s no specific page, I’m working on the whole website in the RTL mode but let’s take contact page as an example:
https://adssport.dz/%d8%aa%d9%88%d8%a7%d8%b5%d9%84-%d9%85%d8%b9%d9%86%d8%a7/?lang=ar

2/ all text sections need a second font in RTL mode , and btw my css codes make that happened in laptop (LTR: inter font/ RTL:noto kufi font)

3/ I assure you I applied the .rtl class before all font css codes and the laptop version confirm that ?? it’s working 100%normally

#405295 Copied

yaci

Participant

July 17, 2024 at 08:58

Also another question is there a custom css font codes for mobile version?

#405296 Copied

Jack Richardson

Support staff

July 17, 2024 at 13:06

Dear @yaci

Could you share with us what example sections of texts have incorrect font on RTL mode ? Because currently by using the web-inspector we see that correct fonts are correctly applied for both modes.
Also, please take a deep look on the screenshot we shared because even now we see that .rtl prefix is added not before each h3, h4 selectors.

Kind regards,
Jack Richardson
The 8theme’s team

#405396 Copied

yaci

Participant

July 17, 2024 at 17:30

thank you for your support i found a solution which is adding the following codes:

in header.php:
in css:@import url(‘https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;700&display=swap’);

#405458 Copied

Jack Richardson

Support staff

July 18, 2024 at 07:56

Dear @yaci,

We are pleased to hear that you have found a solution that meets your needs. We would also like to suggest utilizing our built-in feature, ‘Custom Fonts’. For more detailed information on how to set up custom fonts with XStore, please visit the following link: https://www.8theme.com/documentation/xstore/xstore-features/how-to-setup-custom-fonts-with-xstore/.

Best regards,
Jack Richardson
The 8Theme Team

#405521 Copied
Tagged: customizing woocommerce font, edit font in woocommerce rtl, right-to-left woocommerce themes, rtl mode font change, rtl woocommerce theme customization, wordpress woocommerce rtl font change, wordpress woocommerce themes
Viewing 7 results - 1 through 7 (of 7 total)