Skip to main content

Custom font

Adding a custom font to your Shopify theme can enhance your store’s branding and aesthetics. Follow these steps to integrate a custom font into Mind.

What is a custom font?​

A custom font is a unique typeface that isn’t included in Shopify’s default font library. Instead of using the standard fonts from Theme settings > Typography, you can upload and apply a custom font to Mind to create a distinctive brand identity.

Custom fonts allow you to:

  • Match your brand’s style with a unique typography choice.
  • Enhance the shopping experience with a more polished and professional look.
  • Stand out from competitors by using a font that reflects your store’s personality.

Mind uses three font families, each set in Theme settings > Typography > Fonts: Body, Sub heading and Heading. The snippet typography-adapter.liquid turns them into three CSS variables that the whole theme reads:

  • --font-body-family
  • --font-sub-family
  • --font-heading-family

To use a custom font, you load the font file and then point one or more of these variables at it.

How to add a custom font file to your theme​

Follow these steps to integrate a custom font into your theme.

Step 1: Start editing the theme's code​

  • Install our theme to your store
  • Open the theme's editor
  • Click on the three dot button, then choose "Edit code"

Step 2: Add the font to the theme's assets​

  • Locate the Assets folder
  • Click on Add a new asset
  • Upload your font file in .ttf, .woff or .woff2 format

For example, you can download a free font file from Google Fonts and then use the downloaded files.

Step 3: Create a file for the new font​

  • Click on Create a blank file in the Assets folder
  • Create a file named stylesheet_font.css
  • Insert the font codes into the file, for example:
stylesheet_font.css
@font-face {
  font-family: "Roboto-Bold";
  src: url("Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Roboto-Medium";
  src: url("Roboto-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Roboto-Regular";
  src: url("Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

In that:

  • font-family: Insert your font name, such as Roboto-Bold
  • src: Insert the full font file name (Roboto-Bold.ttf) and the format based on the type of file (.ttf = truetype, .woff = woff, .woff2 = woff2)

Step 4: Change the setting​

  • In the code editor, open the Snippets folder and find the file named typography-adapter.liquid
  • Find the following lines to change the font used by the theme:
    • --font-heading-family
    • --font-sub-family
    • --font-body-family
  • Replace the value after the : with the name of your font. For example:
--font-heading-family: 'Roboto-Bold';

For H1 to H6 headings, the theme allows you to choose a separate font for each level through Theme settings > Typography (Heading 1 to Heading 6 > Font: Body, Sub heading or Heading).

Check which font your H1–H6 headings are currently using, then locate the case font_heading_setting block in the same file. If your headings are set to use Heading, replace the font in when 'heading'. Likewise, if they're using Body or Sub heading, update when 'body' or when 'subheading'.

For example:

when 'heading'
  assign font = 'Roboto-Bold'

Step 5: Add the font to <head>​

  • In the code editor, find the Layout folder
  • Open the theme.liquid file
  • Add {{ 'stylesheet_font.css' | asset_url | stylesheet_tag }} inside <head>. For example, you can add it just before the {{ 'styles.css' | asset_url | stylesheet_tag }} line.

Now, you should see that your font is shown on the theme. If you still have any issue, contact us at [email protected]

How to add the embed Google font codes to the theme​

Follow these steps to add the Google embed fonts into your theme.

Step 1: Start editing the theme's code​

  • Install our theme to your store
  • Open the theme's editor
  • Click on the three dot button, then choose "Edit code"

Step 2: Add the font code to the theme.liquid file​

  • Locate the Layout folder
  • Open the file theme.liquid
  • Paste the embed Google font code before the line {% render 'page-title' %}

guide-custom-font-embed.webp

Step 3: Change the setting​

  • In the code editor, open the Snippets folder and find the file named typography-adapter.liquid
  • Find the following lines to change the font used by the theme:
    • --font-heading-family
    • --font-sub-family
    • --font-body-family
  • Replace the value after the : with the name of the Google font. For example:
--font-heading-family: 'Exo 2';

For H1 to H6 headings, locate the case font_heading_setting block in the same file and replace the font in the when line that matches the font your headings use ('heading', 'body' or 'subheading').

For example:

when 'heading'
  assign font = 'Exo 2'

Now, you should see that your embed font is shown on the theme. If you still have any issue, contact us at [email protected]

caution

Changes in typography-adapter.liquid and theme.liquid are code edits, so a theme update replaces them. Note them down before you update and re-apply them afterwards. See Update theme.