Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How can I fix a language-specific font issue in my bilingual online store?

How can I fix a language-specific font issue in my bilingual online store?

YK94
Visitor
1 0 4

Hello all,

 

I'm trying to build my first Shopify store here! What got me sold was the huge community, support and the great reputation that the Shopify community has.

 

So here's where I' facing some difficulties. 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 on the Helvetica (default Debut theme font). and if I try to change it, it changes for both the english and arabic stores. I have tried to dig in the code and added the specific code to the (theme.css.liquid) file:

 

{%- if shop.locale == 'ar' -%}
{% assign header_font = settings.type_header_font_arabic %}
{% assign base_font = settings.type_base_font_arabic %}
{%- else -%}
{% assign header_font = settings.type_header_font %}
{% assign base_font = settings.type_base_font %}
{%- endif -%}

 

Note that I have added arabic font components "type_header_font_arabic" and  "type_base_font_arabic" components in the (settings_data.json) file to contain:

"type_header_font": "helvetica_n7",
"type_header_font_arabic": "amiri_n7",
"type_base_font": "helvetica_n4",
"type_base_font_arabic": "amiri_n4",

 

Unfortunately it still shows the Helvetica font for both the English and Arabic pages/stores.

 

Any ideas on how to solve this language-specific font issue?

Replies 30 (30)

CloveHitch
Visitor
1 0 0

Did you solve this problem yet?

KetanKumar
Shopify Partner
37409 3661 12115

@YK94 @CloveHitch 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fotiskaima
Tourist
16 0 3

Can you provide me the solution.
I want to change the font-family for the greek language.
The eshop is www.ewoodcollection.com

 

KetanKumar
Shopify Partner
37409 3661 12115

@fotiskaima 

do you need custom code 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fotiskaima
Tourist
16 0 3

Yes that would be nice

KetanKumar
Shopify Partner
37409 3661 12115

@fotiskaima 

Yes please flow this setp

Yes, you can do easy to upload your custom font

1. Go to Online Store->Theme->Edit code
2.Asset->/theme.scss.liquid or your css file->upload your custom font all font tyep = TTF, OTF, WOFF, WOFF2, SVG
3. Asset->/theme.scss.liquid or your css file- ->paste below code at the bottom of the file.

@font-face {
font-family: 'Montserrat-Regular';
src: url('{{ 'Montserrat-Regular.eot?' | asset_url }}');
src: url('{{ 'Montserrat-Regular.eot??#iefix' | asset_url }}') format('embedded-opentype'),
url('{{ 'Montserrat-Regular.woff' | asset_url }}') format('woff'),
url('{{ 'Montserrat-Regular.ttf' | asset_url }}') format('truetype'),
url('{{ 'Montserrat-Regular.svg#Montserrat-Regular' | asset_url }}') format('svg');
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: antialiased;
}

can you please just change font name, for example, Montserrat-Regular to your custom font name

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
fotiskaima
Tourist
16 0 3

Thank you very much 

KetanKumar
Shopify Partner
37409 3661 12115

@fotiskaima 

its my pleasure to help us 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MGonline
Tourist
3 0 1

Hi,

 

I'm creating a multi-lingual store (English and Arabic)

The font in Arabic is not ideal and i would like to change it to another font.

How can i achieve this? I can't seem to figure it out as I don't have the necessary level of understanding towards code editing. 

My theme is Prestige.

 

Appreciate any advice!

KetanKumar
Shopify Partner
37409 3661 12115

@MGonline 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
MGonline
Tourist
3 0 1

Thanks for your response!

 

Site URL is: https://mahaghalayini.com/

 

on the top right there is the language selector, when Arabic is chosen, I can't figure out how to apply RTL or how to change the Arabic font to "Noto Kufi Arabic" for better readability.

 

Many Thanks!

Edit2222
Tourist
7 0 2

Hello, 

 

Great store!  I believe we are both having the same issue. 

How are you getting on? 

 

Where are you based?  I think we could collaborate. We have luxury skincare, wellness and beauty. 

 

KetanKumar
Shopify Partner
37409 3661 12115

@Edit2222 

Sorry you are facing this issue, it would be my pleasure to help you.

 

Welcome to the Shopify community!😊

Thanks for your good question.

 

Please share your site URL,

I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Edit2222
Tourist
7 0 2

Hi, I have messaged you directly on Shopify. thank you 

KetanKumar
Shopify Partner
37409 3661 12115

@Edit2222 

Well Thanks for update

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Galaxystories
Visitor
2 0 2

Hi Katan, I have the same issue and I would like to change the Arabic fonts easily or a way to change the current one.

 

my website it Galaxystoires.com

KetanKumar
Shopify Partner
37409 3661 12115

@Galaxystories 

oh sorry but doesn't work your store 

This site can’t be reached

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Galaxystories
Visitor
2 0 2

my bad it was a spelling mistake. check now please https://galaxystories.com/ 

KetanKumar
Shopify Partner
37409 3661 12115

@Galaxystories 

thanks for current url i have check and view theme code but i can't see code font 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
sungcho
Visitor
1 0 0

Hi I am facing the same issue for using English and Korean.

Can you help me setting up custom Korean font for our store?

 

store url is: https://belpy.me

 

webthink
Visitor
1 0 1

Hello! I am new to shopify and I haven't yet finished my shop. I am just learning it and I have the same problem with the greek fonts. Open sans usually can show them properly. I have set as a default, the english characters change but the greek are set to Arial.
I tried the above solution unfortunately with no success.
My site is https://0e6dc8-2.myshopify.com/.

Thank you in advance!

KetanKumar
Shopify Partner
37409 3661 12115

@webthink 

can you please share issue image

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hiba665
Tourist
10 0 4

hello sir , I need your help pls 

I’m currently building a multilingual store (English and Arabic) using the Dawn theme, with Poppins set as the default font. However, I’ve noticed that Poppins isn’t ideal for Arabic, and I’d like to switch to the Cairo font (a custom font) when the Arabic language is selected.

I’m not too experienced with code editing, and I’m having trouble figuring out how to implement this. Any guidance or advice on how to achieve this would be greatly appreciated!

Thank you in advance!

KetanKumar
Shopify Partner
37409 3661 12115

@hiba665 

Welcome to the Shopify community!
and Thanks for your Good question. 😊

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hiba665
Tourist
10 0 4

sure here it is : https://www.cozmic.me/  

I tried to make the font all the store " cairo " which work well with arabic and not for english 

so I want to keep poppin for english and cairo for arabic , what do you suggest ? 

thank you in advance 

KetanKumar
Shopify Partner
37409 3661 12115

@hiba665 popping is best for all 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hiba665
Tourist
10 0 4

it does not works well with arabic language

 

KetanKumar
Shopify Partner
37409 3661 12115

@hiba665 oh sorry this if doesn't work so may be it can be done some customization code add like html, css 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
hiba665
Tourist
10 0 4

hello sir , I need your help pls , I'm facing a problem in my menu in tablet and mobile view , when I click the burger icon I see only a trasparent white background and no menu , here it is my website : https://www.cozmic.me/ 

can you pls help me

KetanKumar
Shopify Partner
37409 3661 12115

@hiba665 oh sorry for that issue 

i can see your store you have use third party page build right? so can you please check and confirm this app with code some code are confit 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing