Jump to content

Multinigual Website Customized Font

Recommended Posts

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. 

Link to comment
  • Replies 9
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Link to comment

#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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Edited by perphekt
Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.