Use a custom font

We do not provide support for code customizations

If you are not comfortable making code changes, we highly recommend hiring an expert developer.

We rely on Shopify's Font Picker to provide a font selection for your store. To access these settings go to Theme settings > Typography. Installing a font not available in the default selection will involve making some code customizations.

Installing a custom font

1

Prepare your font files

Please ensure you have a valid license to use the font you are trying to install

• Download your font in webfont file types such as .woff2 or .woff

• If you don't have a webfont version of your font, you can use a generator to convert it. Font Squirrel has a tool you can use for this.

2

Upload font files

• Open your Shopify admin and navigate to Content > Files.

• Upload each file for your font.

3

Edit theme code

• Open up the theme editor and select theme__styles.liquid from within the snippets folder

• Add the below code after the {% style %} tag. Be sure to replace MY_FONT with your font name and ensure the URLs are correctly linking to your uploaded font.

  theme__styles.liquid

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

• From here you can include your font by updating the below code inside the same file. The variables --type-font-body-family , --type-font-header-family and --type-font-nav-family control the font family used for body, headings and navigation text.

  theme__styles.liquid

  --type-font-body-family: {{ settings.type_font_body.family }}, {{ settings.type_font_body.fallback_families }};
  --type-font-body-style: {{ settings.type_font_body.style }}; 
  --type-font-body-weight: {{ settings.type_font_body.weight }}; 
  --type-font-header-family: {{ settings.type_font_heading.family }}, {{ settings.type_font_heading.fallback_families }};
  --type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }}; 
  --type-font-nav-family: {{ settings.type_font_nav.family }}, {{ settings.type_font_nav.fallback_families }};

• The updated code should look something like this

  theme__styles.liquid

  --type-font-body-family: 'MY_FONT';
  --type-font-body-style: {{ settings.type_font_body.style }};
  --type-font-body-weight: {{ settings.type_font_body.weight }}; 
  --type-font-header-family: 'MY_FONT'; 
  --type-font-header-style: {{ settings.type_font_heading.style }}; --type-font-header-weight: {{ settings.type_font_heading.weight }}; 
  --type-font-nav-family: 'MY_FONT';