How do I add custom fonts?

If you're not comfortable making code changes to your theme, we highly recommend working with one of our partners who specialize in theme customizations. Our support is limited to this guide.

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.

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.

First, open up your Shopify admin (navigate to Content > Files, click Upload files and upload the individual files.

Look for an open css-variables.liquid inside your snippets folder.

Add this code on the first line after the {% style %} tag:

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

Note: Do not modify the file_url filter in the code above. It is used to retrieve the CDN link for the font file from the Files section in the admin.

You can set the headings and body fonts by changing these two lines:

--typeHeaderPrimary: {{ settings.type_header_font_family.family }};
--typeBasePrimary:{{ settings.type_base_font_family.family }};

to match your newly created font:

--typeHeaderPrimary: 'MyFont';
--typeBasePrimary: 'MyFont';

You'll also want to adjust a few other lines in this file. The following lines previously used your theme settings to set the style and font weight. Similar to above, you'll want to change these values according to your newly added font.

--typeHeaderWeight: {{ settings.type_header_font_family.weight }};
--typeBaseWeight: {{ settings.type_base_font_family.weight }};

The above would change to something like:

--typeHeaderWeight: 700;
--typeBaseWeight: normal;