A Shopify store owner needs to implement language-specific fonts: Raleway for English and German, and Manrope Extra Light for Greek. They have limited coding experience but are willing to follow detailed instructions.
Proposed Solutions:
Two community members provided similar approaches:
@font-face declaration in theme.liquid or CSS files:lang(el) CSS selector to target Greek content specifically:lang(en) and :lang(de)Current Issue:
The implementation isn’t working. The user:
Screenshots were shared showing their implementation attempt. The discussion remains unresolved with troubleshooting ongoing to identify whether the issue stems from incorrect URL formatting, CSS selector specificity, or file format compatibility.
Hello everyone!
My website will be in English, German and Greek. The font for English and German is Raleway. I want to add a specific font for the Greek language in Shopify. The font I want to use is Manrope - Extra Light. How can I add a custom font for Greek in Shopify? I am unfamiliar with editing codes, but I already made some changes by copying and pasting codes. Can you provide detailed steps for doing this manually?
Thanks a lot!
Hey @elenav ,
Yes! You can add Manrope - Extra Light for Greek by uploading the font to Content > Files in Shopify, then adding this to theme.liquid inside :
@font-face {
font-family: 'Manrope ExtraLight';
src: url('your-woff2-font-url') format('woff2'),
url('your-woff-font-url') format('woff');
font-weight: 200;
}
Then, in base.css or theme.css, add:
html:lang(el) body { font-family: 'Manrope ExtraLight', sans-serif !important; }
html:lang(en) body, html:lang(de) body { font-family: 'Raleway', sans-serif !important; }
Replace the font URLs with the uploaded links. Save and check your site!
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat
Hi @elenav
Go to Online Store > Themes > Actions > Edit Code
Open the base.css or theme.css file
Paste this CSS code
@font-face {
font-family: 'Manrope Extra Light';
src: url('YOUR_UPLOADED_FONT_URL.woff2') format('woff2'),
url('YOUR_UPLOADED_FONT_URL.woff') format('woff');
font-weight: 200 !important;
font-style: normal !important;
}
html {
font-family: 'Raleway', sans-serif !important;
}
:lang(el) {
font-family: 'Manrope Extra Light', sans-serif !important;
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!
It didn’t work. I converted the .ttf file into a .woff file, uploaded it, deleted the .woff2 line, and copied and pasted the code you provided, but maybe the URL/link is not correct?!
What should the URL look like? Sorry for bombarding you with questions!
No worries! You’re not bombarding me—I’m here to help!
https://cdn.shopify.com/s/files/1/XXXXXX/files/Manrope-ExtraLight.woff?v=YYYYYY
Make sure: You copy the full URL after uploading. You replace ‘your-woff-font-url’ in the code with the actual Shopify file URL.
Try This Updated Code in theme.liquid (Inside )
Replace the URL with the exact one you got from Shopify.
Apply the Font for Greek in base.css or theme.css css Copy Edit
html:lang(el) body {
font-family: 'Manrope ExtraLight', sans-serif !important;
}
If it still doesn’t work, let me know what’s happening, and I’ll troubleshoot further!
It didn’t work.