Custom Font to My Shopify Store?

Store Design

Topic summary

A user wants to add a custom font (specifically a Google Font) to their Shopify store using the Dawn theme, as the desired font isn’t available in the theme settings.

Two solutions were provided:

Method 1 - Custom Font Upload:

  • Upload a woff2 font file via Shopify Admin > Content > Upload file
  • Copy the file URL
  • Add @font-face CSS code in base.css or theme.css (located in Edit Code section)
  • Define the font family name and apply it to desired elements using CSS selectors

Method 2 - Google Fonts:

  • Link the Google Font in the theme.liquid file’s section
  • Apply the font using CSS in base.css
  • This approach was confirmed working with the Dawn theme

Both methods require editing theme code files. The discussion remains open with no confirmation from the original poster about which solution they implemented.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, I’m trying to add a custom font to my Shopify store that isn’t available in the theme settings (checkout). I want to use a Google Font for my headings and body text. Can someone guide me on how to upload and apply a custom font through code or theme customization? I’m using the Dawn theme. Thanks in advance!

1 Like
2

Hey @chriswilly42 ,

Here is how you can add the custom font in the Shopify store.

  • Go to Shopify Admin > Content > Upload file.
  • In the upload file you need to upload a woff2 file of the font.
  • Copy the link of the woff2 file.

Now you need to go Shopify Edit Code to define the custom font.

Go to Shopify Admin > Click on Online Store > Edit Code > base.css file.

This may be a base.css file or maybe a theme.css file. [depend on your theme file].

Now you have to paste this code in the end of base.css file.

@font-face {
  font-family: 'MyCustomFont';
  src: url('Paste the copied code here') format('woff2');
  font-weight: normal;
  font-style: normal;
}

In the URL you have to paste the actual URL of the file.

Now you name your font MyCustomFont. Now you can use it anywhere. Like I did for paragraph tag.

p {
   font-family: MyCustomFont !important;
}

If this was helpful mark as Solution and Like it.

3

You can add a Google Font by linking it in your theme.liquid file’s section sweetgreen nutrition calculator, then use CSS in base.css to apply it—did this with Dawn too and it worked great.