We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Custom Font to My Shopify Store?

Custom Font to My Shopify Store?

chriswilly42
Visitor
1 0 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!

Replies 2 (2)

The_ScriptFlow
Trailblazer
201 17 26

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.

- Need a Shopify Specialist? Chat on WhatsApp Or Email at info@thescriptflow.com
- For any custom section queries, bug fixing please visit: Level 2 Fiverr Profile
- Buy Me a Coffee? Nah… Let’s Upgrade to a Car
- If my solution was helpful, mark it as a solution and hit the like button!

steffinjack4
Visitor
1 0 0

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