How to Find the CSS Selector of an Element in Fontio

If you want to apply a font to a specific part of your store using Custom Selector in Fontio, you’ll first need to find the correct CSS selector for that element.

This guide shows you how to inspect your store in your browser and locate the selector you can use in Fontio.

Step 1: Open Your Storefront

Go to the page on your live store where the element appears.

For example, this could be:

  • A product title
  • A button
  • A heading
  • An announcement bar
  • A menu item
  • A section of text

Make sure the exact element you want to target is visible on the page.

Step 2: Right-Click the Element

Hover over the exact element you want to change.

Then right-click on it and select Inspect (sometimes shown as Inspect Element depending on your browser).

This will open your browser’s developer tools and highlight the code connected to that element.

Step 3: Look for the Element’s Class or ID

In the developer tools panel, look at the highlighted HTML.

You’re usually looking for one of these:

  • A class (starts with class="...")
  • An ID (starts with id="...")
  • Or the HTML tag itself (like h1, p, button, etc.)

Examples:

<h1 class="product-title">Example Product</h1>

In this case, the selector would usually be:

.product-title

Another example:

<div id="shopify-section-header">

In this case, the selector would be:

#shopify-section-header

Step 4: Copy the Selector

Once you identify the class or ID, convert it into a CSS selector format:

  • Classes use a period (.)
     Example: class="announcement-bar" → .announcement-bar
  • IDs use a hashtag (#)
     Example: id="shopify-section-header" → #shopify-section-header
  • HTML elements can sometimes be used directly
     Example: h1, h2, p, button

If an element has multiple classes, start with the one that seems most specific and relevant.

Example:

<button class="button button--primary">

Possible selectors:

  • .button
  • .button--primary

Step 5: Add the Selector in Fontio

Once you have your selector, go back to Shopify admin and open Fontio.

Choose the font you want to use, or click Add Font to create a new one.

Scroll down to Target Elements → Custom Selector.

Enter the CSS selector for the element you want to target.

Examples:

  • .product-title
  • .announcement-bar
  • .button
  • h1

Step 6: Save Your Font Settings

When everything looks good, scroll back to the top and click Create (or save your changes, if editing an existing font).

Fontio will apply the selected font to the element(s) matching that selector.

Step 7: Review Your Changes

Check the front end of your store to confirm the font is displaying correctly.

You can also review the update inside your Theme Editor.

If the font doesn’t apply as expected, the selector may be:

  • Too broad
  • Too specific
  • Different on mobile vs. desktop
  • Controlled by a different theme element than expected

If needed, go back and inspect the element again to test a different selector.

Step 8: You’re All Set 🎉

You now know how to find and use CSS selectors to target specific elements in Fontio.

Additional Notes

A CSS selector is a way to target specific parts of your store’s design so Fontio knows exactly where to apply a font.

Common selector types

Class selector

Targets elements with a class name.

Example:

<h2 class="section-heading">

Selector:

.section-heading

ID selector

Targets a specific element or section with an ID.

Example:

<div id="shopify-section-header">

Selector:

#shopify-section-header

Element selector

Targets all elements of that type.

Examples:

  • h1
  • h2
  • p
  • button

Use these carefully, since they can affect multiple areas of your store.

Tips for choosing the best selector

  • Start with the most specific selector that still targets what you want
  • Avoid selectors that are too broad (like div or span)
  • If a class appears in multiple places, Fontio may apply the font in more areas than expected
  • Some Shopify themes use dynamic or repeated classes, so testing may be needed

Common examples

  • .product-title – product titles
  • .announcement-bar – announcement bar text
  • .site-nav – navigation items
  • .button or .btn – buttons
  • h1 – main headings
  • p – paragraph text
  • #shopify-section-header – a specific theme section

If the selector doesn’t work

If your selector doesn’t apply the font correctly:

  • Double-check that you copied the correct class or ID
  • Make sure the element exists on the page you’re testing
  • Try a more specific selector
  • Test on the live storefront after saving
  • Some apps or themes may load content dynamically, which can affect targeting



Back to blog