Streamline Support: How do I add custom fonts?
If you're not comfortable making code changes to your theme, we highly recommend using one of our partners who specialize in adding custom fonts to your shop. 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.
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 Shopify admin (navigate to /settings/files, click Upload files and upload the font files individually.
Scroll down to see steps for older versions of Streamline.
3. Remove the unwanted fonts
Look for and open critical-css.liquid inside your snippets folder.
Delete the following lines that previously loaded the fonts from the Theme Editor:
{{ header_font | font_face: font_display: 'swap' }} {{ base_font | font_face: font_display: 'swap' }} {{ base_font_bold | font_face: font_display: 'swap' }} {{ base_font_italic | font_face: font_display: 'swap' }} {{ base_font_bold_italic | font_face: font_display: 'swap' }}
4. Add your new fonts
In critical-css.liquid inside your snippets folder. After the style tag (line 7), add this code:
@font-face { font-family: "MyFont"; src: url('{{ "font_myfont.woff2" | file_url }}') format("woff2"), url('{{ "font_myfont.woff" | file_url }}') format("woff"); }
Change the values in bold to what matches the files you generated earlier. Now your fonts are loaded and the ones from the theme settings are not, so you're ready to integrate the new font.
5. Integrate your new fonts
Open css-variables.liquid inside your snippets folder. Find these two lines:
--typeHeaderPrimary: {{ settings.type_header_font_family.family }}; --typeBasePrimary:{{ settings.type_base_font_family.family }};
And change them to:
--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.
--typeHeaderStyle: {{ settings.type_header_font_family.style }}; --typeHeaderWeight: {{ settings.type_header_font_family.weight }}; --typeBaseWeight: {{ settings.type_base_font_family.weight }}; --typeBaseStyle: {{ settings.type_base_font_family.style }};
The above would change to something like:
--typeHeaderStyle: italic; --typeHeaderWeight: 700; --typeBaseWeight: normal; --typeBaseStyle: normal;
Look for and open critical-css.liquid inside your snippets folder.
Delete the following lines that previously loaded the fonts from the Theme Editor:
{{ header_font | font_face: font_display: 'block' }}
{{ base_font | font_face: font_display: 'block' }}
{{ base_font_bold | font_face }}
{{ base_font_italic | font_face }}
{{ base_font_bold_italic | font_face }}
Now look for and delete any line that starts with font-family, font-weight, or font-style. They will look similar to this:
font-family: {{ settings.type_base_font_family.family }}, {{ settings.type_base_font_family.fallback_families }}; font-weight: {{ settings.type_base_font_family.weight }}; font-style: {{ settings.type_base_font_family.style }};
At the bottom of critical-css.liquid, before the closing {% endstyle %} tag, set your new body font with this code:
body, input, textarea, button, select { font-family: "MyFont", sans-serif; }
And your header font with:
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, .section-header__title, .spr-header-title.spr-header-title { font-family: "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.