How do I correctly add a custom font to the "Debut" theme?

Store Design
1

I’ve been trying to do so for the past hour. I’ve downloaded my font and converted it into a “WOFF” file. I must be doing something wrong because when I enter the “h2” or “h3” for the “css selector” the font still doesn’t show up. I appreciate any help :slightly_smiling_face:

2

Hi @KarlieJB .

Thank you for your message, I would be happy to offer you some suggestions.

This is a fantastic question, I can certainly see the desire in adding a specific font that may not be readily available on our platform. That being said, Adding fonts to Shopify developed themes is not something our Themes team would be able to support, however, have you thought about utilizing a third-party app for a simpler solution? I would be happy to provide you with a couple of examples from our app store you can look into if you are curious:

- Fontify: Free to install, additional charges may apply. You can install your Google font by choosing one from a dropdown menu. You can download your custom font from anywhere. By uploading it in Fontify, assign your elements and it will now be your default font.

  • FontBox: Free to install, additional charges may apply. Similar to Fontify, You can easily choose and add fonts from 1000+ google fonts.

  • FontPicker: Free, also similar to the above examples, An easy way to add Google Fonts to your store without any coding.

Alternatively, if you are not interested in utilizing an app, you could take a look at this third-party tutorial video, that walks you through the process of manually adding a custom font to your Shopify theme. If you are still having issues, you could always reach out to a local developer or a Shopify Expert, who may be able to help you out.

I hope this helps you out moving forward, feel free to reach back out here if you have any questions, we are always happy to chat!

3

There could be a couple of reasons why it’s not showing up. The importance of a CSS style depends on specificity, so there may be a more specific style being applied to your heading tags. What I mean is let’s say your h2 looks like this:

## {{ collection.title }}

And now lets say you try to add a custom font to that:

h2 {
font-family: 'Your Custom Font Family';
}

If there is a more specific style declaration somewhere else in your theme that’s applying a different font family, your css will be ignored:

h2.collection-heading {
font-family: sans-serif;
}

In that case the sans-serif font would display despite you having added your own CSS. Or take this case:


  ## {{ collection.title }}

You could override the “sans-serif” font by being more specific than it:

.collection-heading__container h2.collection-heading {
font-family: serif;
}

In this case the serif font would override it. A way to override the specificity is to use an important flag:

h2 {
font-family: 'Your Custom Font Family'!important
}

Unless there is a more specific style declared that has an important flag, your custom font family will take priority.

It could also be you just haven’t created your font family correctly. Here is a pretty nice tutorial on the steps you need to take:

https://support.weareunderground.com/article/272-how-do-i-add-a-custom-font-to-my-theme