Add custom font

Our support doesn’t cover issues caused by adding and using a custom font. The amount of support for custom fonts is limited to this topic only.

Custom fonts are those you can’t choose from the font selector in the theme’s Typography settings. You can add them only by changing the theme code. Note, that adding a custom font disables the standard font selectors in the theme’s Typography settings. To be able to use the default fonts again, you’ll need to discard the code changes.

To add a custom font to the theme code, follow the steps below:

1. Get the webfont version of your custom font. Webfonts have WOFF or WOFF2 file types (not TTF or OTF). Learn more about webfonts.

2. Upload the font file to the Content > Files folder in your admin. For example, Flavellya.woff2

Adding custom font file to the file storage in your admin

3. Select the three dots next to the theme name and choose Edit code in the theme actions list. Don’t forget to duplicate the theme before editing its code to have a backup copy.

4. In the search box, enter css-variables.liquid to find the corresponding file.

5. Add the code snippet to the file. Place it between the strings {% style %} and :root as shown in the screenshot below. Don’t forget to replace Flavellya with your font name and woff2 (in two places) with your font file type.

@font-face {
font-family: "Flavellya";
src: url("{{ 'Flavellya.woff2' | file_url }}") format("woff2");
}

Adding code snippet to the theme file

6. In the same file, find the theme element you want to apply the custom font to, for example: /* headings */, and the font-family property for this element, for example, --gsc-headings-font-family.

7. Replace the value of the font-family property with your custom font name, for example, "Flavellya" as shown in the screenshot below.

   

   Replacing font-family property value with custom font name
8. Save the changes.