Add custom fonts to your theme

400
500
600
700

@font-face {
  font-family: "Brand Font";
  src: url("REGULAR-FONT-URL") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Font";
  src: url("BOLD-FONT-URL") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

--sort-title-font-weight: {{ title_font.weight }};

--sort-title-font-weight: 400;

--sort-body-weight: {{ body_font.weight }};

--sort-body-weight: 400;

@font-face {
  font-family: "Brand Font";
  src: url("REGULAR-FONT-URL") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Font";
  src: url("ITALIC-FONT-URL") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

Recommended code example

The following example adds a custom font with Regular, Medium, Semibold, and Bold weights and uses it for both Title and Body typography.

Add the font-face rules before the :root block:

@font-face {
  font-family: "Brand Font";
  src: url("REGULAR-FONT-URL") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Font";
  src: url("MEDIUM-FONT-URL") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Font";
  src: url("SEMIBOLD-FONT-URL") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Brand Font";
  src: url("BOLD-FONT-URL") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Then find:

--sort-title-font: "{{ title_font.family }}", "{{ title_font.fallback_families }}";

and replace it with:

--sort-title-font: "Brand Font", sans-serif;

Find:

--sort-body-font: "{{ body_font.family }}", "{{ body_font.fallback_families }}";

and replace it with:

--sort-body-font: "Brand Font", sans-serif;

How Maison uses the font variables

Maison uses two main font-family variables:

--sort-title-font
--sort-body-font

Navigation, Buttons, and Product grid then inherit one of those font families:

--sort-navigation-font: var(--sort-{{ settings.sort_navigation_font }}-font);
--sort-button-font: var(--sort-{{ settings.sort_button_font }}-font);
--sort-product-font: var(--sort-{{ settings.sort_product_font }}-font);

Because of this structure, changing Title and Body at the CSS-variable level automatically makes the custom font available to the other typography groups.

Theme Editor behavior after the customization

After you replace --sort-title-font or --sort-body-font with a custom font family, the font selector in Theme settings > Typography may still display the SHOPLINE font that was selected previously.

This is expected.

The Theme Editor setting still provides values for the original title_font and body_font objects, but your modified CSS variable overrides the font family used on the storefront.

Other typography controls can continue to work, including:

• Letter spacing
• Font size
• Line height
• Font weight
• Uppercase
• Navigation Font from
• Buttons Font from
• Product grid Font from

Existing Maison font-face code

The original file automatically creates font-face declarations for the Title and Body fonts selected from the Theme Editor.

It includes common weights:

400
500
600
700

Your custom @font-face declarations are added in addition to these generated font faces.

You do not need to remove the original font-face code for the customization to work.

Keeping the original code makes it easier to restore the standard Maison typography later.

Font preloading

At the bottom of components/theme-css-var.html, Maison can preload the fonts selected through the normal Theme Editor settings when Preload theme fonts is enabled.

The original preload logic uses:

{{ body_font | font_url() }}
{{ title_font | font_url() }}

Because an uploaded custom font is not part of those original font objects, Maison's standard preload logic does not automatically preload the custom font URL.

This does not prevent the custom font from working. The browser will load it through your @font-face declaration.

If you manually add custom font preloading, make sure it references the correct custom font URL and only preload fonts that are needed immediately.

Font fallback

Always provide a fallback family.

For a sans-serif font:

--sort-title-font: "Brand Font", sans-serif;

For a serif font:

--sort-title-font: "Brand Serif", serif;

The fallback is used if the custom font cannot load or does not contain a required character.

Important notes

• The customization is made in components/theme-css-var.html.
• Font files can be uploaded to Settings > File library.
• Use only font files that you have permission to use.
• WOFF2 is recommended when available.
• Each font weight should have its own @font-face declaration.
• The Title font is controlled by --sort-title-font.
• The Body font is controlled by --sort-body-font.
• Navigation, Buttons, and Product grid can continue inheriting Title or Body.
• Do not remove unrelated color, spacing, border, or layout variables from the file.
• Keep a backup of the original file before making changes.
• Keep a copy of your custom font code because a future manual theme update may require the customization to be reapplied.
• Editing theme source code turns the theme into a custom theme and can affect automatic theme updates.

Troubleshooting

If the custom font does not appear, check that the font-family name in the CSS variable exactly matches the name in your @font-face declarations.

If the font file does not load, verify that the URL copied from the SHOPLINE File library is correct and accessible.

If the Title font changes but Body text does not, make sure you also replaced:

--sort-body-font

If Body text changes but headings do not, make sure you also replaced:

--sort-title-font

If Navigation uses the wrong font, check Theme settings > Typography > Navigation > Font from.

If Buttons use the wrong font, check Theme settings > Typography > Buttons > Font from.

If Product grid text uses the wrong font, check Theme settings > Typography > Product grid > Font from.

If bold text does not look correct, make sure the corresponding font-weight file has been uploaded and declared with the correct font-weight.

If italic text does not look correct, upload and define a true italic font file.

If some translated characters use the fallback font, the custom font may not contain those characters. Use a font file that supports the required language.

If the font becomes too heavy or too light after changing Theme Editor settings, make sure the selected weight matches one of the weights included in your custom font-face declarations.

If the storefront breaks after editing the file, restore your backup of components/theme-css-var.html and apply the changes again carefully.

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.