How do I add custom fonts?

Our support for this feature is limited to this tutorial. It requires some coding knowledge of Shopify themes. We suggest hiring a Shopify Expert if you don't feel comfortable proceeding with the following tutorial.

With some custom code you can add your own fonts to our themes. These fonts will not appear in the theme editor as a dropdown option, but instead override the values directly in the stylesheet.

1. Generate your font and style files

Upload your custom font files to Font Squirrel with this tool. TTF file types have the best success. Then click the Download your kit button to get a zip file with the required files.

Fonts must have a valid license to use on the web

2. Add the font files to your theme

First, open up your theme editor (navigate to /admin/themes, click Actions on your copy of Impulse, and then click Edit code. Click on Add new asset in your assets folder and upload the fonts that you just got in the zip file above.

3. Edit your theme's stylesheet

Look for and open theme.scss.liquid inside your assets folder. At the top of the file, add this code:

@font-face {
  font-family: "MyFont";
  src: url('{{ "font_myfont.woff2" | asset_url }}') format("woff2"),
       url('{{ "font_myfont.woff" | asset_url }}') format("woff");

Change the values in bold to what matches the files you generated earlier.

Now that you have your font files loaded and its name, you're ready to integrate it with your theme's stylesheet.

Find theme.scss.liquid in the assets folder and then search for this line of code with command + f on Mac and control + f on Windows:

/*================ Global | Normalize ================*/

Add these two lines below it, replacing the font-name with your newly uploaded font.

$type_base_stack: 'MyFont', sans-serif;
$type_header_stack: 'MyFont', sans-serif;

Use sans-serif or serif as the fallback depending on your font style. You can set both lines to use the same font-name if you only add one.