How to Exclude Specific Elements from a Global Font in Fontio

If you’ve applied a font sitewide but want certain elements to keep a different font (like buttons, headings, or specific sections), you can exclude them by using CSS selectors in your theme.

Step 1: Open Fontio

Log in to your store using the store owner’s account.

From the left-hand menu, go to Settings → Apps, then click Fontio.

Step 2: Find the Font Applied Globally

Locate the font that is currently being applied across your site.

This is usually a font assigned to broad target elements such as:

  • Body
  • All Headings
  • Navigation
  • Or a wide Custom Selector that affects multiple elements

Click into that font to review the settings.

Step 3: Identify the Element You Want to Exclude

Decide which part of your store should not use the global font.

Common examples include:

  • Buttons
  • Product titles
  • Announcement bar text
  • Header navigation
  • Specific sections or blocks

You’ll need the CSS selector for the element you want to exclude.

Examples:

  • .btn – buttons
  • .product-title – product titles
  • .announcement-bar – announcement bar text
  • h1 – main headings
  • #shopify-section-header – a specific section

If you're not sure which selector to use, you can find it using your browser’s Inspect Tool.

Step 4: Open Your Theme Code

Since exclusions require a CSS override, this part is done in your Shopify theme rather than directly inside Fontio.

In Shopify admin, go to Online Store → Themes.

Next to your live theme, click … (three dots) → Edit code.

Step 5: Add a CSS Override for the Element

Open your theme’s main CSS file. Depending on your theme, this may be named something like:

  • base.css
  • theme.css
  • styles.css
  • theme.scss.liquid

Scroll to the bottom of the file and add a CSS rule that assigns a different font to the element you want to exclude.

Example:

.btn {

 font-family: Arial, sans-serif !important;

}

This tells Shopify to use Arial for buttons instead of the global Fontio font.

You can replace .btn with the selector for any element you want to exclude.

Step 6: Save Your Changes

After adding your CSS override, click Save in the code editor.

Your selected element should now display the new font instead of the globally applied Fontio font.

Step 7: Review Your Changes

Check your storefront to confirm the excluded element is now using a different font.

You may also want to review the change inside your Theme Editor to make sure it looks correct across desktop and mobile.

If you don’t see the update right away, try:

  • Refreshing the page
  • Clearing your browser cache
  • Viewing in an incognito window

Step 8: You’re All Set 🎉

Your global Fontio font will continue to apply across the site, while the excluded element uses its own font.

Additional Notes

Fontio is designed to apply fonts to selected elements, but excluding elements from a global font is typically handled with a CSS override in your theme.

Common selector examples

  • .btn – buttons
  • .button – button elements in some themes
  • .product-title – product titles
  • .announcement-bar – announcement bar text
  • .site-nav – navigation menu items
  • h1, h2, p – heading or paragraph elements
  • #shopify-section-header – a specific section by ID

Important tips

  • Use !important in your CSS override if the global font is still taking precedence.
  • Different Shopify themes use different selectors, so the exact selector may vary.
  • If you want to exclude an entire section, you may need to target a parent container instead of an individual text element.

Example overrides

Exclude buttons:

.btn,

.button {

 font-family: Arial, sans-serif !important;

}

Exclude a specific section:

#shopify-section-header * {

 font-family: inherit !important;

}

Exclude product titles only:

.product-title {

 font-family: Georgia, serif !important;

}

If you're unsure which selector to use

You can inspect your store’s elements using your browser’s Inspect Tool to locate the correct class, ID, or HTML element.

Back to blog