perphekt Posted July 25, 2023 Share Posted July 25, 2023 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
tuanphan Posted July 26, 2023 Share Posted July 26, 2023 Hi, What is site url? We can check 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
perphekt Posted July 26, 2023 Author Share Posted July 26, 2023 @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. Link to comment
tuanphan Posted July 27, 2023 Share Posted July 27, 2023 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
perphekt Posted July 27, 2023 Author Share Posted July 27, 2023 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 Link to comment
tuanphan Posted July 28, 2023 Share Posted July 28, 2023 Use this CSS code html[lang="ar"] * { font-family: 'gilroy' !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
perphekt Posted July 31, 2023 Author Share Posted July 31, 2023 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
tuanphan Posted August 1, 2023 Share Posted August 1, 2023 #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
perphekt Posted August 1, 2023 Author Share Posted August 1, 2023 (edited) 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 August 1, 2023 by perphekt Link to comment
tuanphan Posted August 3, 2023 Share Posted August 3, 2023 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment