Using Custom Fonts

Enhance includes a flexible typography system powered by Shopify's font settings. If you would like to use a custom font that is not available within Shopify, you can manually add it to the theme.

Step 1: Upload the Font File

Upload your font files to Shopify.

Navigate to:

Content → Files

Upload your font files, then copy the file URL from Shopify Files. You will use this URL inside the @font-face rule in the next step.

For maximum browser compatibility, we recommend uploading both .woff and .woff2 versions of your font. These formats are designed for websites and provide the best balance between compatibility, quality, and performance.

Traditional font formats such as .ttf and .otf are not considered webfont formats and should be converted to .woff and .woff2 before being added to your store.

Step 2: Open the Theme Fonts File

From your Shopify admin, navigate to:

Online Store → Themes → Edit Code

Open:

snippets/theme-fonts.liquid

This file controls the font declarations and font-family rules used by the theme.

Step 3: Add the Font Face Rule

Inside snippets/theme-fonts.liquid, locate the {% style %} tag.

Add your custom @font-face rule before the :root variables.

Use the font file URL you copied from Shopify Files.

@font-face {

  font-family: "My Custom Font";

  src: url("PASTE-FONT-FILE-URL-HERE.woff2") format("woff2");

}

Replace:

• My Custom Font with your preferred font name.

• PASTE-FONT-FILE-URL-HERE.woff2 with the copied Shopify Files URL.

You can add multiple @font-face declarations if your font includes different weights such as Regular, Medium, Semi Bold, or Bold.

Step 4: Update the Font Variables

Inside the :root block, update the font variables with your custom font name.

:root {

  --font-heading: "My Custom Font";

  --font-body: "My Custom Font";

  --font-outline-text: "My Custom Font";

}

Step 5: Update the Font Family Rules

Below the :root block, update the font-family rules so the theme uses your custom font.

For headings:

h1,h2,h3,h4,h5,h6,

.ko-text-h1,.ko-text-h2,.ko-text-h3,

.ko-text-h4,.ko-text-h5,

.ko-single-product .product-title {

  font-family: "My Custom Font", sans-serif;

}

For body text:

body,.ko-text-xs,.ko-text-sm,.ko-text-base,.ko-text-lg,.ko-text-xl {

  font-family: "My Custom Font", sans-serif;

}

Save the file and refresh your storefront to view the changes.

Example Configuration

@font-face {

  font-family: "Recoleta";

  src: url("YOUR-COPIED-SHOPIFY-FILE-URL.woff2") format("woff2");

}

:root {

  --font-heading: "Recoleta";

  --font-body: "Recoleta";

  --font-outline-text: "Recoleta";

}

h1,h2,h3,h4,h5,h6,

.ko-text-h1,.ko-text-h2,.ko-text-h3,

.ko-text-h4,.ko-text-h5,

.ko-single-product .product-title {

  font-family: "Recoleta", sans-serif;

}

body,.ko-text-xs,.ko-text-sm,.ko-text-base,.ko-text-lg,.ko-text-xl {

  font-family: "Recoleta", sans-serif;

}

Troubleshooting

The font is not displaying

Verify that:

• The font file has been uploaded successfully.

• The copied Shopify Files URL is correct.

• The font-family name matches exactly between the @font-face declaration, the :root variables, and the font-family rules.

The font only works on some pages

Clear your browser cache and verify that all font declarations and font-family rules have been updated correctly.

The font appears different than expected

Some fonts require separate files for different weights such as Regular, Medium, Semi Bold, or Bold. Make sure the appropriate font files have been uploaded and declared.