Add google font for different language

elenav · ‎02-24-2025

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!

rajweb · ‎02-24-2025

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 <head>:

@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

-Need a Shopify developer?
https://rajatweb.dev/

Email: rajat.shopify@gmail.com

elenav · ‎02-24-2025

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!

rajweb · ‎02-24-2025

No worries! You're not bombarding me—I’m here to help!

1. Check the Correct Font URL in Shopify:

- After uploading the .woff file in Content > Files, Shopify will generate a URL like this:

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 <head>)

<style>
@font-face {
    font-family: 'Manrope ExtraLight';
    src: url('https://cdn.shopify.com/s/files/1/XXXXXX/files/Manrope-ExtraLight.woff?v=YYYYYY') format('woff');
    font-weight: 200;
    font-style: normal;
}
</style>

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!

-Need a Shopify developer?
https://rajatweb.dev/

Email: rajat.shopify@gmail.com

elenav · ‎02-24-2025

This is what I did... 😬 It didn't work.

Thank you for your time and help!

topnewyork · ‎02-24-2025

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!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month

Add google font for different language

Add google font for different language

Community Blog Articles