Add a custom font to the Dawn Theme Version 1.1.0

Technical Q&A

Topic summary

Custom fonts in Shopify’s Dawn theme (v1.1.0 and 2.0) are added via code, not the Typography settings. Users upload .woff/.woff2 files and declare them with @font-face in theme.liquid, then apply the font to elements.

For Dawn 2.0, one approach is to override :root variables (e.g., --font-body-family and --font-heading-family) with custom font names. Another tutorial creates a “custom-font” section that accepts a woff2 file URL and applies the font sitewide using !important.

Common requests include using multiple fonts and limiting custom fonts to headings only. Suggestions are to target h1, h2, etc., or set separate body vs heading variables, with mixed success. Questions about showing fonts in the Typography UI remain unanswered; current methods don’t add them as selectable options.

Latest development: a user successfully changed fonts via :root variables (Unbounded regular/bold) on desktop, but the fonts don’t load on mobile; no fix has been provided.

Key terms: @font-face (CSS rule to load custom fonts), woff/woff2 (web font formats). Code snippets and linked tutorials are central. The thread is ongoing without a definitive solution.

Summarized with AI on February 3. AI used: gpt-5.
1

Hello Community, does someone know how to implement a custom Font, when I use the dawn theme (I have the font in the .woff Format)

Thank you for your help,

newbie

2

First you need to upload it in Assets.
Then you go to the file layout/theme.liquid and add the code: https://i.imgur.com/Fdf5Ab4.png
@font-face {
font-family: ‘fontname’;
src: url(‘{{ ‘fontname.woff’ | asset_url }}’) format(‘woff’),
font-weight: normal;
font-style: normal;
font-display: swap;
}
At the end you just need to get fontname, it will work fine.
Hope it helps!

1 Like
3

@gregorsart

Please follow this step-by-step tutorial about how to install custom fonts. Let me know if you need any further help.

Kind regards,
Diego

3 Likes
4

Hi there, I tried this, but it didn’t work for me so far as I can tell. Should the font be accessible in the typography section??

2 Likes
5

same problem. I followed the steps but it’s not appearing as an option in the typography section of the theme. how so you get it to work? thank you!

1 Like
6

Hi

Ive followed your instructions and added a custom font but I would like to use more than one on my site. Is there an easy way to do this? I am not very familiar with coding but found your instructions really easy to follow.

I’m currently using the Narrative theme but hoping that doesn’t make a difference.

Many thanks

Naomi

7

Hi @NaomiRD ,

You can create a new Question and send me the link. I will check it.

Thank you.

8

Hi,

its not working for the Dawn2.0 Theme. Does anyone have a solution which works for Dawn 2.0? Spent several hours, but didn’t get it

9

Hi

Many thanks for your response. Ive now posted a new question and hopefully this is the link.

https://community.shopify.com/post/1366407

10

Hi!!

I have the same issue, I want to add a custom font only to headings, I’m using Dawn.

Did you find a way to do it?

Really appreciate the help.

Thank you!!

11

I did it like the description above. You may have to add h1,h2, cause many headlines are in the h2 class

12

Hi @KKay

This worked, but it added the font on my hole page and I just wanted in headings.

Do you know a way that it will only be added to headings on dawn?

Thank you!!

Carolina

13

Hello, trying to add an arial font to the announcement bar, and a different font to the rest of the site. Any thoughts?

14

what is the solution? i have custom fonts for my brand and I have the new theme Dawn but there is no where for me to add fonts.

15

this doesnt work for dawn theme

16

Hi @StephanieG ,

Refer https://community.shopify.com/post/1366407

Or you can create a new Question and send me the link. I will check it.

17

can you explain this a little more ? do i just replace the word fontname?

18

Hi

I used your guide and it worked.

but how do I do it so the custom font will only work on header?

I want to have 2 different fonts, one for the header and one for the body.

I tried change the h1, h2 etc. on your snippet but it didnt work.

thanks

19

@diego_ezfy

Hi

I used your guide and it worked.

but how do I do it so the custom font will only work on header?

I want to have 2 different fonts, one for the header and one for the body.

I tried change the h1, h2 etc. on your snippet but it didnt work.

thanks

20

I am trying to make it work on the Dawn theme.. But It failed on me. Any tips?