How do I add my own fonts to a theme

All Underground themes utilize Shopify's font picker, which offers a wide range of fonts to select from. For a full list of those fonts please see the Shopify documentation.

From the thousands of third-party fonts that exist, it would not be possible for theme developers to pre-install those knowing what each merchant might need. Adding a font requires an understanding of code and how to debug issues that arise should something go wrong.

Adding a font should not be attempted on a live / published theme at any time and should be tested in a development / test environment first.

Please note that:
The following is a guide only, and is not supported by our team. If you need help adding a custom font, we do offer a paid service where we’d be happy to do this for you.

Step 1 

Purchase the webfont version of your font. The font files must include at least the WOFF and WOFF2 file types (TTF or OTF are not a webfont file types).
It is important to understand and ensure that you are using the correct license for the font you are using, and that it is intended for use on a commercial website to ensure that you are not breaking any laws.

Step 2

From your Shopify Admin, go to Online Store > Themes > next to the theme you want to edit, click Actions > Edit Code. In the sidebar, choose Assets > stylesheet.css or theme.css (theme dependent). Scroll to the bottom of the file and paste the following code:

@font-face {
font-family: "NAME OF FONT";
src: url("NAME-OF-FONT-FILE.woff2") format("woff2"),
url("NAME-OF-FONT-FILE.woff") format("woff");
}

Replace NAME OF FONT with the name of your font,

Step 3

Go to your admin, Content, Files, and upload your theme there.

The URL you get from that upload is what you'll use to replace NAME-OF-FONT-FILE.woff in this code in your stylesheet file from before: 

url("NAME-OF-FONT-FILE.woff2")

Step 4

Your font is now installed. Now, using code, we need to tell the theme what headings or text will use our new font.

Go back to the browser tab with the theme code editor and open the stylesheet.liquid or theme.css file again. Paste the below code at the bottom.

.yourcssselectorhere { font-family: "NAME OF FONT"!important; }

Now, in a new browser tab, go to your website and find the heading or text you want in this font: in this example it is a heading. Right click on the words and select Inspect.

A window will popup showing you the code of the site. Look in the right hand column for the CSS code that is styling your heading. In the example above you will see on the left, highlighted in grey, the heading is an <h2> and on the right the CSS property selector for the heading is .section-title.lines h2. Click the property name (circled above) and copy the text. 

Replace yourcssselectorhere from the code we just added from with this selector. Then replace "NAME OF YOUR FONT" with the name you used before. It will look like this:

Save your changes, refresh your website and have a look at your custom font.

Again, if you find you need more assistance we do offer a paid service to add a custom font. Our paid service goes a step further than this guide and will add your custom fonts as options you can select in the Typography section in the Theme Settings of your theme editor.