Add custom fonts

Step 1: Download the font

When the font is downloaded, the archive contains many folders and files with different values of the Bold property + its variations with the Italic property. Select the desired one and save it locally (on your device).

In our example, we used the Montserrat-Regular.ttf and Roboto-Regular.ttf fonts as an example.

Link to the font in the Google Fonts: https://fonts.google.com/specimen/Montserrat.

The needed file is located in the 'static' folder inside the archive. For the first time, you can also use this font to see how it works, and after that, use the font you actually need.

Step 2: Upload the font to the Shopify admin

Navigate to the Shopify admin -> Content -> Files, click on the "Upload files" button, and select the font file from your device.

Tip: Leave this browser tab open; we will need it later. Open another browser tab with the Admin panel.

Step 3: Add the Custom Liquid section to the theme

Navigate to the Theme customizer and add a Custom Liquid section to the Header or Footer group. To avoid the section from visually disturbing you in the future, we recommend adding it to the Footer Group.

Open the section settings and set section indents to 0.

Step 4: Add the custom code to that section

Enter this section and paste the code provided below. Replace all the Montserrat and Roboto mentions with the font name you use.

<style>
@font-face {
  font-family: 'Montserrat'; /* Heading font */
  src: url('paste_link_to_Montserrat_font_here');
}
@font-face {
  font-family: 'Roboto'; /* Base font */
  src: url('paste_link_to_Roboto_font_here');
}
:root {
  --heading-font-family: 'Montserrat'; /* Replace heading font */
  --base-font-family: 'Roboto'; /* Replace base font */ 
}
</style>

Navigate to the Files in your Admin panel, hover the mouse over the font file, and click on the "Copy link". Return to the code we provided and paste the link as the value of the src: url('paste_link_to_font_here'); property.

If you want to use the same font for the heading and regular text, just remove one of the @font-face { } directives, including the opening " { " and closing " } " curly brackets.

Note: Please pay attention to the quotation marks inside url('') property. The link should be placed within single quotation marks.

Tip: For easier work with the code, we recommend first copying the code provided above into a plain text editor (such as Notepad), making all the necessary changes there, and then copying and pasting the final version into the theme editor.

You are supposed to get the following result in your theme.

Pay attention: if you use the Victory theme (Nitro, Flip, Roast, and Athletica presets), then you should use the following code:

<style>
@font-face {
  font-family: ''; /* Base font */
  src: url('paste_link_to_font_here');
}

@font-face {
  font-family: ''; /* Heading font first line */
  src: url('paste_link_to_font_here');
}

@font-face {
  font-family: ''; /* Heading font second line */
  src: url('paste_link_to_font_here');
}

:root {
  --base-font-family: ''; /* Base font */
  --heading-font-family: '; /* Heading font first line */
  --heading-font-second-family: ''; /* Heading font second line */
}
</style>