How to add custom fonts

To add custom fonts take the following steps:

1. Prepare your custom fonts, they should be in woff and woff2 format.

2. Go to Online Store > Themes > … > Edit code > Assets > Add new asset. Upload all your fonts here.

3. While still in the editor search for theme-css-variables.liquid and open the file.

4. Immediately after the line of code that reads {%- style -%} paste the following:

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

5. Update the font name with your font name and the file name with your file name.

6. Replace the following lines.

--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-heading-family: {{ settings.type_heading_font.family }}, {{ settings.type_heading_font.fallback_families }};
--font-menu-family: {{ settings.type_menu_font.family }}, {{ settings.type_menu_font.fallback_families }};
--font-button-family: {{ settings.type_button_font.family }}, {{ settings.type_button_font.fallback_families }};

with your custom family, like so:

--font-body-family: 'Font name'; 
--font-heading-family: 'Font name'; 
--font-menu-family: 'Font name'; 
--font-button-family: 'Font name';