How to Use Custom Selectors in Fontio

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: Select or Add a Font

Choose the font you want the custom selectors to apply to, or click Add Font to add a new one.

Customize any additional font settings as needed, then scroll down to Target Elements → Custom Selector.


Step 3: Add Elements to Custom Selector

If you want to apply a font to a specific element that isn’t covered by the default options, you can use a Custom Selector.

  1. Upgrade to a Paid plan if you are not already on one.
  2. Under Custom Selector, enter the CSS selector for the element you want to change (for example: .product-title or .announcement-bar).

 

Step 4: Click Create

When everything looks good, scroll back to the top of the page and click Create to finalize your font.

 

Step 5: Review Your Changes

Once the font has been applied to your selected elements, you should see the update in two places:

  • On the front end of your live site
  • Inside your Theme Editor

Note: Fontio does not add fonts to the Typography section within your store’s theme settings.

 

Step 6: You're All Set 🎉

Your font is now applied to the selected elements.


    Additional Notes

    A custom selector is a CSS identifier used to target specific elements in your store’s design.

    Common examples include:

    • .product-title – product titles
    • .announcement-bar – announcement bar text
    • .site-nav – navigation menu items
    • h1 – heading text
    • p – paragraph text

    Selectors usually start with:

    • . for classes (example: .product-title)
    • # for IDs (example: #shopify-section-header)
    • element names like h1, h2, or p

    If you're unsure which selector to use, you can inspect your store’s elements using your browser’s Inspect Tool.

    Back to blog