Custom Font not working (Dawn 2.0)

Store Design
, ,

Topic summary

Custom font in a Shopify Dawn 2.0 theme failed to load despite working with other fonts using the same setup. The user declared @font-face in theme.liquid and applied the font in base.css to headings and body text.

Root cause: the @font-face src used a Liquid output wrapper around a full CDN URL — src: url(“{{ ‘https://…woff2’ }}”) — which prevented proper resolution. Liquid (Shopify’s templating syntax) should not be used to print a literal external URL in CSS.

Fix: replace the src with a direct, plain URL without Liquid braces, e.g. src: url(https://…woff2) format(“woff2”). Quotes are optional in CSS and were removed in the working example.

Outcome: after removing the Liquid curly braces and using the direct URL, the custom font loaded immediately. Issue resolved; no further actions required.

Summarized with AI on December 27. AI used: gpt-5.
1

Hello,

I have tried to upload and use a specific custom font in my Shopify theme (Dawn 2.0).

It works with other fonts (using the same code) but for some reason the font I want to use is not working properly. I’ve downloaded it in various formats and spoke to the font label, they couldn’t help me either.

Here is the code I’m using:

in theme*.liquid, just above *

{% style %}

@font-face {
font-family: "TT_Travels_Text_Medium";
src: url("{{ 'https://cdn.shopify.com/s/files/1/0671/9317/6384/files/TT_Travels_Text_Medium.woff2?v=1718092352' }}") format("woff2");
}

{% endstyle %}

in the base.css file, at the end of the code

h1, h2, h3, h4, h5, h6, a, span, p {
font-family: "TT_Travels_Text_Medium", sans-serif !important;
font-weight: normal;
/* -moz-font-feature-settings: "ss01","ss02"; -webkit-font-feature-settings: "ss01","ss02"; font-feature-settings: "ss01","ss02"; */
}

--font-style-body {
font-family: "TT_Travels_Text_Medium", sans-serif !important;
/* -moz-font-feature-settings: "ss01","ss02"; -webkit-font-feature-settings: "ss01","ss02"; font-feature-settings: "ss01","ss02"; */
}

As I mentioned, when using the exact same code with other fonts, everything works fine.

It would be great, if there was a solution to this issue, as I really want to use this specific font for my shop.

Thanks in advance!

2

Hello @bureau_ks , Please make change in CSS where you put your src of the font family remove curly brackets of the liquid put only the link there like below. Please check and reply.

{% style %}

@font-face {
font-family: "TT_Travels_Text_Medium";
src: url(https://cdn.shopify.com/s/files/1/0671/9317/6384/files/TT_Travels_Text_Medium.woff2?v=1718092352) format("woff2");
}

{% endstyle %}
3

Great, that solved the problem immediately!

Thank you very much!