How can I add a custom font for Arabic text on my bilingual store?

[amrhassan]

I'm trying to build an English and Arabic store. So far I have managed to do that smoothly plus change the layout to RTL. The problem is that the Arabic text does not look that good by using the default font and if I try to change it, it changes for both the english and arabic.

Anyone can help me how i can add a custom font to be used only when the language switches to Arabic?

[Clemone]

I can definitely help you on this , 

[amrhassan]

Thank you, i have added a code to theme.liquid to enable RTL. Just need to know how to add custom font for it

[Guleria]

Hello @amrhassan ,

1) Create 2 versions of css, one for English and one for Arabic. 

2) Get the language identifier in liquid ( I mean store it in a  variable ) and then with an if condition call the css files a/to language selector.

In this way you can call custom fonts for Arabic language and English language fonts will remain as it is.

Thank

[amrhassan]

Hi thank you for your response,

can you clarify more the steps because i am not very friendly with coding and i need to know where to create the css files and how to apply it in the code editor

[Transcy]

Hello @amrhassan ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code

Go to Assets folder -> base.css file

Add this following code at the bottom of page

:lang(ar) {
  font-family: 'YourCustomFont', sans-serif;
}

Save and preview 

Hope this can help.

Transcy

[amrhassan]

Hello, thanks for your reply, 

I don’t have a bass.css file.. i am using a premium theme (mate) so where exactly can i put the code?

[bbb7]

Thx. Works well with default theme