How can I add custom fonts to the Dawn theme?

[AKrausz]

Help!

I’m wanting to add two custom fonts to my clients site to be used in various ways, Headers, menu fonts etc..

@KetanKumar you’ve helped me before - are you able to find a solution to this for the Dawn theme?

Site: https://reign-new-zealand.myshopify.com/

PW: nadron

Thanks so much

[GemPages]

Hello @AKrausz
I would like to give you the recommendation to support you so kindly follow steps below:

Step 1: From your Shopify Admin, navigate Setting section and select “File”.
Step 2: Upload your Font File by selecting “Upload file”.
Step 3: The opened window will allow you to select the font file to add. After having successfully uploaded the file, select the “Link” icon to copy the file link.
Step 4: After that, look for the file “theme.liquid” under the Layout section or via the search bar. Select to open the file.
Step 5: Add the following codes at the bottom of the file.

<style>
@font-face {
  font-family: "FontName";
  src: url("Linkofthefontfile");
}
.header__inline-menu ul li a{
font-family: "FontName" !important;
}
</style>

Replace the below elements of the code with actual data.

• Font name: the name of the font.
• Linkofthefontfile: the link of the Font File that was previously uploaded. It is copied after you select the Link icon.
  Hit “Save” when finished.
  So you can use FontName that you added.

I hope the above is useful to you.
Best regards,
GemPages Support Team

[irene-vintage]

Hello @AKrausz

Adding custom fonts to a Shopify site is a great way to make your site stand out and match your brand’s visual identity. Here’s how:

Go to Online Store → Themes → Actions → Assets → Add new Assets

Upload your font file in the appropriate format (usually TTF or OTF)

Create a @font-face rule in your CSS file. In your Shopify theme’s CSS file, create a @font-face rule for each font file you uploaded in the previous step.

@font-face {
  font-family: 'CustomFont1';
  src: url('{{ 'CustomFont1.ttf' | asset_url }}');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'CustomFont2';
  src: url('{{ 'CustomFont2.ttf' | asset_url }}');
  font-weight: normal;
  font-style: normal;
}

Apply the custom fonts to your site elements. You can now use the custom fonts in your site elements by specifying the font-family property in your CSS.

h1 {
  font-family: 'CustomFont1', sans-serif;
}

Hope this can help.

Regards,

Ali Reviews team.

[AKrausz]

Hey there,

I wonder if you were happy to go into my files and add just the one font and then i can do the same with the other font?

Also assuming you can only control the custom fonts in the CSS like you can’t select it in the editor?

One of the fonts that i’ve added into the assets folder is Lufga-Thin.woff2

I’ve tried to do the above suggestion and it’s not working so i think i’m doing something wrong and would love a little guidance

Site: https://reign-new-zealand.myshopify.com/

PW: nadron

[StudioBlank]

Let me explain it to you because I’ve done it before, and it works.
Before we start you need to have 2 copies of your custom font in .WOFF and .WOFF2

You can visit OTF to TTF Converter Online - AnyConv and convert your custom font to WOFF and WOFF2.

After completing those steps go and upload them to your store files (Content>Files)

Then follow these steps:

Go to Online Store>Themes>Edit code

Find Assets folder and upload your WOFF and WOFF2 converted custom font files that we mentioned before.

Next,

Go to Base.css and enter the below code at the end of the file.

/* Custom Font*/
@font-face {
font-family: "Gordita-Regular";
src: url("https://cdn.shopify.com/s/files/1/0813/8113/0566/files/Gordita-Regular.woff2?v=1717169205") format("woff2"),
url("https://cdn.shopify.com/s/files/1/0813/8113/0566/files/Gordita-Regular.woff?v=1717169164") format("woff");
}
 
h1,h2,h3,h4,h5,h6,a,p { font-family: "Gordita-Regular"!important; }

Don’t mind how my Base.css file looks like because I’ve added other custom codes to it.

Just press Enter couple of times at line 3456 and you good to go.
After inserting the code mentioned above, change “Gordita-Regular” to your custom font name you want to choose.

Now follow these steps:

Go to your Content folder and copy your WOFF custom font URL that you’ve uploaded in the beginning

And replace the following highlighted line

Do the same step but now with WOFF2

And replace the highlighted line with the copied URL

And now just rename where it says “Gordita-Regular” to your custom font file name and you’re pretty much done

Please like and accept this solution if that works for you!
Happy designing!

[gr_trading]

Hi @AKrausz ,

Please refer the below video for instruction to add custom font in Shopify schema to enable font in editor.

How To Add Custom Font In Your Shopify Store || Shopify Font Customization

[maers]

Unfortunately this did not work for me after doing everything exactly as you did, would appreciate some assistance if possible. If it’s outdated, do let me know. If you’d like to checkout my codes, feel free to let me know as well.

[maers]

Does this code not separate headings and body? Do you have one that separates them?

[gr_trading]

Current video don’t work like this, but you can create a new entry for selection of header font which will work for heading only.

[maers]

If you’d be able to provide a guide on that, it’d be highly appreciated!

[StudioBlank]

You need to add the HTML code in the base.css file.

Then copy the link of your fonts (in your shopify content folder) and place it were it says url in the code (keep the “” symbols).

You have to do that for both WOFF and WOFF2.

You can then use “font-family: (Your-Custom-Font)” CCS code on any class to change the font.

For example:

.image-banner-heading (

font-family: ‘Monsterrat’

)

Let me know if this works

[Denziox44]

This is much cleaner approach on how to add custom font on shopify
www.codeniden.com/how-to-add-custom-font-on-shopify

[WolfieVoir]

Hi I have tried to follow these steps to a custom font to my shopify dawn theme, and i dont have the option to add a new asset under that folder, it will only let me add a new file or folder then just shows this box to enter in once i have choosen either option. do you have any further suggestions?

[devcoders]

Hello @AKrausz

Steps to Add Custom Fonts in Dawn

1. Upload Fonts

1. Go to Shopify Admin → Content → Files.
2. Upload your font files (.woff or .woff2 are best for web).

• Suppose you uploaded MyFont-Regular.woff2 and MyFont-Bold.woff2.

---

2. Define Fonts in CSS

Edit your theme’s CSS file (assets/base.css in Dawn).

At the top of the file, add:

@font-face {
  font-family: 'MyFont';
  src: url('{{ "MyFont-Regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'MyFont';
  src: url('{{ "MyFont-Bold.woff2" | asset_url }}') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SecondFont';
  src: url('{{ "SecondFont-Regular.woff2" | asset_url }}') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

(Replace names and files with yours.)

---

3. Apply Fonts

Now, assign them to different elements:

/* Example usage */
h1, h2, h3, .header__menu-item {
  font-family: 'MyFont', sans-serif;
}

body, p, .footer {
  font-family: 'SecondFont', sans-serif;
}

[jimmy819]

Yes, you can add custom fonts to Dawn without an app. The main thing is to load the font correctly and then target the parts of the theme where you want to use it.

For newer Dawn versions, I’d recommend using Shopify’s Content → Files area rather than relying on older assets-folder tutorials.

1. Upload the font

In Shopify Admin, go to:

Content → Files → Upload files

For web use, .woff2 is generally the preferred format because it is more compact. If you have separate weights, upload each one (for example, Regular 400 and Bold 700).

2. Add @font-face

Go to:

Online Store → Themes → … → Edit code → Assets → base.css

Add something like this:

@font-face {
  font-family: "MyCustomFont";
  src: url("YOUR_FONT_FILE_URL") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MyCustomFont";
  src: url("YOUR_BOLD_FONT_FILE_URL") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Copy the actual file URL from Content → Files and replace the placeholders.

Shopify’s current theme documentation uses the file_url filter when referencing uploaded fonts, so if you’re putting the Liquid directly in a theme stylesheet/template, the equivalent approach is:

@font-face {
  font-family: "MyCustomFont";
  src: url("{{ 'MyCustomFont-Regular.woff2' | file_url }}") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

3. Apply it where you need it

For example, if you want the custom font on headings and the navigation:

h1, h2, h3, h4, h5, h6,
.header__menu-item {
  font-family: "MyCustomFont", sans-serif;
}

Or, if you want it throughout the store:

body {
  font-family: "MyCustomFont", sans-serif;
}

I would not recommend blindly adding !important to everything. Dawn has its own typography variables and component styles, so it is better to target the specific elements you actually want to change.

One important limitation

Adding a custom @font-face does not automatically add that font to Dawn’s Typography dropdown in the Theme Editor. You’re essentially overriding the CSS for the selected elements. Shopify’s font picker is designed around the fonts available through Shopify’s font library.

Also make sure you have the appropriate web-use license for the font. And don’t load unnecessary font formats/weights, every font file is another resource the visitor’s browser has to download, which can affect page performance.

If the font uploads successfully but still doesn’t appear, check the browser’s DevTools → Network tab and filter for font. A 404/CORS error or an incorrect file URL will usually reveal the problem immediately.