Use custom fonts

Prepare your font files

• 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.

Upload font files

• Open your Shopify admin and navigate to Content > Files.
• Upload each file for your font.

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.

  1

  2

  3

  4

  5

  @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.

  1

  2

  3

  4

  5

  6

  --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

  1

  2

  3

  4

  5

  6

  --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';