How to add a custom font to Eurus theme
If you’re using the Eurus theme, you can add a custom font that is not included in Shopify’s font library by following these steps:
Step 1: Prepare Your Font File
Make sure your font file is in .WOFF or .WOFF2 format.
- WOFF2 is highly recommended for better loading speed and SEO performance.
- If your font is in .TTF, convert it using tools like CloudConvert before uploading.
Step 2: Upload Font to Shopify Admin
- Go to: Shopify Admin → Settings → Content → Files -> Click on ‘Upload Files’ button
- When upload is complete, hover to your font file then click “Copy link” icon to get the font URL.
Step 3: Add Custom Liquid Section in Eurus Theme Editor
Navigate to:
Online Store → Themes → Choose Eurus → Edit Theme
- In the left panel, go to Header group
- Click “Add a section” → “Custom Liquid”
👉 Important setup:
- Set Top padding and Bottom padding at 0 px for both desktop and mobile to avoid no extra spacing on your storefront
- Placing this inside the Header group ensures the font is loaded globally across all pages
Step 4: Set Declaration Code
You can add this code below into the Custom Liquid section to declare custom font to theme:
{% style %}
@font-face {
font-family: "Canela Regular";
src: url("YOUR_FONT_FILE_URL") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
{% endstyle %}
Note:
- Replace "YOUR_FONT_FILE_URL" with the link from the Files section you get in Step 2
- “woff2” can be replaced by “woff” if it is the font file format you uploaded to Files section
Step 5: Apply the Font in Eurus
Option A: Apply Globally (Best Practice in Eurus)
You can define CSS variables in :root to apply the font across your store:
:root {
--font-body-family: "Canela Regular", sans-serif;
--font-heading-family: "Canela Regular", sans-serif;
--font-heading-highlight: "Canela Regular", sans-serif;
--font-menu: "Canela Regular", sans-serif;
--font-button: "Canela Regular", sans-serif;
}
Option B: Apply to Specific Sections Only
If you only want to target certain parts of the Eurus theme with this custom font, you can follow this code:
.x-block-header .h2 {
font-family: "Canela Regular", sans-serif;
}
You can adjust selectors depending on the section you want to customize.
Note: You can declare and set multiple fonts at the same time by adding code, here is a code example in that case:
{% style %}
@font-face {
font-family: "Philosopher Regular";
src: url("https://cdn.shopify.com/s/files/1/0641/7907/7214/files/philosopher-regular.woff2?v=1769163472") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Philosopher Bold";
src: url("https://cdn.shopify.com/s/files/1/0641/7907/7214/files/philosopher-bold.woff2?v=1769163472") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Philosopher Italic";
src: url("https://cdn.shopify.com/s/files/1/0641/7907/7214/files/philosopher-italic.woff2?v=1769163472") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Canela Regular";
src: url("https://cdn.shopify.com/s/files/1/0937/0288/1599/files/Canela-Regular-Trial.woff2?v=1773993001") format("woff2");
font-display: swap;
font-weight: 400;
font-style: normal;
}
:root {
--font-body-family: "Philosopher Regular", sans-serif;
--font-heading-family: "Philosopher Bold", sans-serif;
--font-heading-highlight: "Philosopher Italic", sans-serif;
--font-menu: "Philosopher Bold", sans-serif;
--font-button: "Philosopher Regular", sans-serif;
}
.x-block-header .h2 {
font-family: "Canela Regular", sans-serif;
}
{% endstyle %}
Step 6: Save Changes
Click Save, and your font will be applied across your store.
If you are not familiar with theme code or facing issues during working on your code Custom Liquid Section, feel free to contact us so we can sort it out for you.
Updated on: 13/04/2026
Thank you!