Brickspace Lab
Contact usContact ShopifyTry a theme
General
General
  • Theme support
  • General
    • Contact support
    • Theme comparisons
  • Theme basics
    • Edit default content
    • Use custom templates
    • Use and install apps
    • Improve page speed
    • Update your theme
    • SEO for Shopify
  • Accessibility for Shopify
  • Developer guides
    • Advanced customizations
  • Use a custom font
  • Install a review app
  • Design with Figma
  • Support
    • Support policy
    • Theme license
    • Store access request
    • Hire a Shopify developer
  • Partners
    • Theme affiliate program
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub

Use a custom font

Last updated 1 month ago

Was this helpful?

We do not provide support for code customizations

If you are not comfortable making code changes, we highly recommend .

We rely on 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 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';

hiring an expert developer
Shopify's Font Picker
a tool you can use