Fonts: Adding a custom downloaded font to your theme

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

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. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open 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 Pipeline 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. 

Where to add the code:

In the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Example:

Save the file after adding your code.

6

Modify the $titleFontStack

Still in your assets/styles.scss.liquid file, use the Find feature on the right code side (Command-F on Mac or Control-F in Windows) and search for (1):

$title

Around line 266, find this section (2):

Once you've found the correct section, replace these 3 lines:

Example for Pipeline 4 (using theme.scss.liquid) and using a different font as an example:

These are the areas changed in Pipeline 4:

Note: Change Septima to Gotham if you're following the Gotham examples. 

Earlier versions of Pipeline, use one of the following code options:

Option 1: Use Gotham Bold for titles only

// $titleFontStack: {{title-FontStack}};
$bodyFontStack: {{body-FontStack}};
$accentFontStack: {{accent-FontStack}};

$titleFontStack: 'Gotham', sans-serif;
// $bodyFontStack: 'Gotham', sans-serif;
// $accentFontStack: 'Gotham', sans-serif;

Option 2: Use Gotham Bold for titles and body text

// $titleFontStack: {{title-FontStack}};
// $bodyFontStack: {{body-FontStack}};
$accentFontStack: {{accent-FontStack}};

$titleFontStack: 'Gotham', sans-serif;
$bodyFontStack: 'Gotham', sans-serif;
// $accentFontStack: 'Gotham', sans-serif;

Option 3: Use Gotham Bold for all fonts

// $titleFontStack: {{title-FontStack}};
// $bodyFontStack: {{body-FontStack}};
// $accentFontStack: {{accent-FontStack}};

$titleFontStack: 'Gotham', sans-serif;
$bodyFontStack: 'Gotham', sans-serif;
$accentFontStack: 'Gotham', sans-serif;

Example of using Option 1:

After pasting the code from one of these options to replace the theme's 3 lines, use the  Save button at the top-right to save the changes:

Example before with Questrial heading:

Example after with Gotham Bold heading:

Notes:


The font-family is: "Gotham" (not GothamBold).


In the Theme Editor, you won't see Gotham Bold or Gotham in the drop-down list. The only want to change the font is in code as it overrides these settings:


To revert back to the original drop-down options and stop using Gotham Bold, you can use uncomment the original lines and comment out the Gotham Bold code:

$titleFontStack: {{title-FontStack}};
$bodyFontStack: {{body-FontStack}};
$accentFontStack: {{accent-FontStack}};

// $titleFontStack: 'Gotham', sans-serif;
// $bodyFontStack: 'Gotham', sans-serif;
// $accentFontStack: 'Gotham', sans-serif;

The lines that start with "// " are commented out. Those lines will not be executed or the code is ignored.

Still need help? Contact Us Contact Us