Skip to main content
All CollectionsTechnical guides
Installing a custom font
Installing a custom font
Thomas K avatar
Written by Thomas K
Updated over a week ago

πŸ’‘

We do not provide support for code customizations

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

Summary


πŸ’‘ Tip: Duplicate your theme before making code changes. This will ensure you have a backup to revert to if needed.

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.

Adding 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 to your store

    • Once you have your webfont files you can upload them to your Shopify admin.

    1. Open your Shopify adding and navigate to Content > Files

    2. Upload each file for your font

  3. Edit theme code

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

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

      @font-face { 
      font-family: "MY_FONT";
      src: url('{{ "MY_FONT.woff2" | file_url }}') format("woff2"),
      url('{{ "MY_FONT.woff" | file_url }}') format("woff");
      }
    3. 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.

      --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 }};
    4. The updated code should look something like this

      --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';
Did this answer your question?