How to set custom fonts for headings and body in Shopify Horizon theme?

Store Design
, , , ,

Topic summary

Custom typography setup requested for the Shopify Horizon (free) theme: use “Rounded Elegance” for headings (h1–h6) and “Neue Montreal” for body/secondary elements (body, p, a, span, button, input, textarea, select).

Key questions:

  • Best practice to host fonts: upload to theme assets vs external CDN.
  • Exact location for @font-face declarations.
  • Where to assign fonts: theme.liquid, base.css/theme.css, or a custom CSS file.
  • How to integrate with Horizon’s typography system to remain update-safe and avoid breaking future theme updates.

Context:

  • Seeks a clean approach aligned with Horizon’s existing settings.
  • Requests sample code and theme-specific guidance.
  • @font-face = CSS rule to load custom font files; CDN = external content delivery network for hosting assets.

Status: No responses yet; solution and best-practice guidance are still needed. Discussion remains open.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi Shopify Community :waving_hand:

I’m using the Shopify Horizon (free) theme, and I want to set up custom fonts with different fonts for headings and body content.

My requirement:

  • Heading font: Rounded Elegance

  • Body / secondary font: Neue Montreal

I want:

  • Rounded Elegance to apply only to:
    h1, h2, h3, h4, h5, h6

  • Neue Montreal to apply to:
    body, p, a, span, button, input, textarea, select

I understand that Horizon uses theme settings and CSS, but I’m not sure:

  1. What is the best practice to upload and register these custom fonts (via assets or external CDN)?

  2. Where exactly should I add the @font-face declarations?

  3. Should the font assignment be done via:

    • theme.liquid

    • base.css / theme.css

    • or a custom CSS file?

  4. Is there a way to integrate this cleanly with Horizon’s existing typography system without breaking future theme updates?

If anyone has done this specifically with the Horizon theme, sample code or guidance would be really helpful.

Thanks in advance! :folded_hands:

2 Likes
2

Hello @siva_fds

You can follow this instructions How to add Custom font in the theme

I hope it will help for you

Regards

Titu

3

I’ve made several posts on adding custom fonts to Shopify, say How do I add my brand font? - #6 by tim_1
or Custom font not loading mobile - #2 by tim_1.

It makes sense to host your font files at Shopify – this way you do not depend on other servers.

I am not a huge fan of editing theme code unless absolutely necessary, so I will recommend using “Custom CSS” or “Custom liquid” whenever possible.

Horizon widely uses CSS variables and there are variables for font assignment:

So you can add CSS rules to override those variables to use your font.

If you open to hiring someone to do it for you, you can Direct Message me here on forum.

4

@siva_fds
You can follow this guide to help you implement the requirement.

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!

5

@siva_fds do you have woff2 files for the fonts you want? or are those added by default to the theme?

if yes then using custom css we can set css for the different elements as per your need, if no then we need to add files and then set css