Multinigual Website Customized Font

Hello everyone,

I'm wondering if anyone can help me with a customized font code for a multilingual website. My website has both English and Arabic language and I have already added a custom font for the English version, yet I'm not able to add a custom font for the Arabic version as every time I try, the font applies to both languages. 

Hi,

What is site url? We can check easier

@tuanphan Thank you for your reply. this is the url https://porpoise-tulip-6874.squarespace.com/config/pages

The website is not live yet so I don't know if the link works. 

19 hours ago, perphekt said:

@tuanphan Thank you for your reply. this is the url https://porpoise-tulip-6874.squarespace.com/config/pages

The website is not live yet so I don't know if the link works. 

The site is private. Can you setup an access password? We can access easier

4 hours ago, tuanphan said:

The site is private. Can you setup an access password? We can access easier

 

Thank you for your help. Kindly access with below details

URL: https://porpoise-tulip-6874.squarespace.com/

Password: m4b-K#0rejl#r?swifro

Use this CSS code

html[lang="ar"] * {
    font-family: 'gilroy' !important;
}

On 7/28/2023 at 12:16 PM, tuanphan said:

Use this CSS code

html[lang="ar"] * {
    font-family: 'gilroy' !important;
}

 

Greetings Tuanphan,

Thank you so much for your help.

I've applied the code and it's working in Arabic, thanks to you!

Now I've some issues with:

1. English heading font is suddenly not reflecting on website (Adeston). 

2. I have two fonts in Arabic - For header (iwanzaza) and Body (Univers Next Arabic). What code should I use to apply both in Arabic?

3. Also Arabic is right-to-left script, so the website has to be flipped (logo on header should be on the right). Alignment of all texts should be on the right. What code should I use?

4. Lastly, How to apply Arabic logo when website is Arabic?

I appreciate your help very much. 

#1. Add !important to your code, for eg

h1 {
    font-family: 'Adeston' !important;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1em
}

DO NOT use !important in @font-face code 

#2. Header, you mean Header (navigation, button, site title) or Heading (h1, h2,..h6)?

#3. Try this CSS

html[lang="ar"] .html-block *, html[lang="ar"] header#header * {
    direction: rtl !important;
}

#4. Replace Pixabay with your logo url

html[lang="ar"] header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/05/27/16/08/flowers-8021795_1280.jpg);
}

37 minutes ago, tuanphan said:

#1. Add !important to your code, for eg

h1 {
    font-family: 'Adeston' !important;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1em
}

DO NOT use !important in @font-face code 

#2. Header, you mean Header (navigation, button, site title) or Heading (h1, h2,..h6)?

#3. Try this CSS

html[lang="ar"] .html-block *, html[lang="ar"] header#header * {
    direction: rtl !important;
}

#4. Replace Pixabay with your logo url

html[lang="ar"] header#header img {
    content: url(https://cdn.pixabay.com/photo/2023/05/27/16/08/flowers-8021795_1280.jpg);
}

 

Hello Tuanphan,

You're such a problem solver! Thank you so much. 

#2. Header, you mean Header (navigation, button, site title) or Heading (h1, h2,..h6)?

I mean heading h1, h2, p, etc. 

#3. Try this CSS

html[lang="ar"] .html-block *, html[lang="ar"] header#header * {
    direction: rtl !important;
}

The code is working, but I also want to reflect it on body. I tried 

body {direction:rtl;}

but it applies the code on both languages. 

On 8/1/2023 at 5:09 PM, perphekt said:

Hello Tuanphan,

You're such a problem solver! Thank you so much. 

 

#2. Header, you mean Header (navigation, button, site title) or Heading (h1, h2,..h6)?

I mean heading h1, h2, p, etc. 

#3. Try this CSS

html[lang="ar"] .html-block *, html[lang="ar"] header#header * {
    direction: rtl !important;
}

The code is working, but I also want to reflect it on body. I tried 

body {direction:rtl;}

but it applies the code on both languages. 

You can add this class name before it

html[lang="ar"]

with heading, use this

html[lang="ar"] {
	h1, h2, h3, h4, h5, h6, p {
		text-direction: rtl !important;
		font-family: "Adeston" !important;
}
}