Fonts: Adding a custom downloaded font to your theme

Keep in mind that Invisible Themes will not be able to assist with themes that have been heavily customized. We can only support the theme as it was originally coded. We recommend hiring a developer to make code changes.

In this tutorial, we will go through the steps of adding a free font, Gotham Bold which is not included in the theme. You can apply the same concept for your own font files. 

1

Download your font

This font is available from external font repositories like Fonts Geek. For this tutorial, we are going to install Gotham Bold but you can use any font from fontsgeek.com: 

http://fontsgeek.com/fonts/Gotham-Bold-Regular

The downloaded font will be in a .zip archive and contain a TrueType version of Gotham Bold. Unzip the font file and have it ready for conversion in the next step. 

2

Convert the font

Use a font conversion service like Transfonter.org to create web ready fonts:

https://transfonter.org/

Steps to convert:

(1) Upload the unzipped Gotham Bold Regular.ttf font file.

(2) Choose all options except TTF (the file is already in TTF format).

(3) Finally, use the convert button and download the new converted fonts.

Press the green Convert button:

Use the Download link and save the converted fonts:

Important: After you download the .zip file to your computer - You'll need to unzip the file.

Both Mac and Windows should have built-in tools to uncompress the .zip file into a folder. 

3

Skip steps 1 and 2, download all font files from Dropbox for Gotham Bold

Steps 1 and 2 are helpful if you're using a different font. For the rest of this tutorial, we'll use these already converted font files for Gotham Bold. 

Click to view files

Use the Download button and choose Direct download:

This will download a folder to your computer called GothamBold.

4

Add font files to your theme

Open your Code Editor. 

In the Assets folder, choose Add a new asset:

One by one, upload each of the 4 font files from the GothamBold folder from your computer:

Be sure to upload all 4 files.

5

Edit the Broadcast stylesheet

Code to use:

/* -- code to use Gotham font-family in theme -- */
@font-face {
  font-family: 'Gotham';
  src: 	url('{{ "Gotham-Bold.eot" | asset_url }}');
  src: 	url('{{ "Gotham-Bold.eot" | asset_url }}#iefix') format("embedded-opentype"),
      	url('{{ "GothamBold.woff" | asset_url }}') format("woff"),
	url('{{ "GothamBold.woff2" | asset_url }}') format("woff2"),
     	url('{{ "GothamBold.svg" | asset_url }}#GothamBold') format("svg");
        font-weight: bold;
        font-style: normal;
}
/* - end - */

If you're not using Gotham and downloaded a different font file, then in the folder where you extracted the .ZIP file, you'll have a file called stylesheet.css:

Open that and it will have the code you need - Example:

You can use that instead. 

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

6

Modify the Heading font

To change the font for headings with your custom font or in this example case with Gotham, add the following CSS to the very bottom of your theme.scss.liquid file:

/* -- code to use custom font-family in theme headings -- */
h1,h2,h3,h4,h5,h6,.article__tags,.blog .article__image .article__tags,.article--single .article__meta,.article--single .article__tags,.article__author-bio h3,.editorial__meta {
    font-family: "Gotham",sans-serif;
}
/* - end - */

replace the value for "Gotham" with your custom font-family name. 

That will change the headings in your theme. 

7

Modify navigation font, paragraphs and list items

To apply your custom font to other elements like the main navigation, paragraphs, list items and links, use this CSS after the above snippet:

/* -- code to use custom font-family in theme content -- */
p, ul li, ul li a {
  font-family: "Gotham",sans-serif; }
/* - end - */

Notes:

In the Theme Editor, you won't see Gotham Bold or Gotham in the drop-down list. These fonts are when you're using the Shopify Font Library. If you override the code in the above steps, the Shopify Font Library is not used:

Disclaimer:
Modify the code at your own risk. Invisible Themes will not provide any warranty or support for code changes. Please work with a developer or Shopify Expert to ensure proper customization. We strongly recommend that you make duplicate of your theme before adding or changing any code in your theme.