Change font family of specific section in new Custom CSS feature

Store Design
, , ,

Topic summary

Goal: Change the font in a single page section to “Avant Garde Gothic Pro” using Shopify’s new Custom CSS, while the font already works elsewhere.

Key guidance:

  • When adding Custom CSS at the section level, you don’t need to re-target the section container; you’ve already scoped to it. Just target the elements inside with CSS selectors.
  • Example provided: p { font-family: “Avant Garde Gothic Pro” } to affect paragraph text within that section.
  • If unsure which elements/selectors to use, identify the specific tags/classes you want to style; many selector options exist.

Tool suggestion:

  • The free “Font Pro” app (beta) includes an AI assistant to generate correct CSS selectors for fonts, which may resolve selector targeting issues.

Assets:

  • A screenshot of the Custom CSS interface was shared; it’s helpful context but not essential to the solution.

Status:

  • No confirmation of a fix from the original poster; guidance provided and thread appears open.
Summarized with AI on December 17. AI used: gpt-5.
1

I am trying to change the font of just one section of a page to Avant Garde Gothic Pro (a font that is in my files) using the new Custom CSS feature but just not sure on the correct format of code to be using. I am using the font on other pages but just can’t seem to get this one section to work!

Thanks!

2

Do I need to determine the specific section if I am using this function on the page?

Screen Shot 2024-10-03 at 9.41.35 am.png
Screen Shot 2024-10-03 at 9.41.35 am.png480×404 38.1 KB

3

When using Custom CSS for the section itself, no. No need to specify the section again because you’ve already chosen that, all you need to do is just specify the CSS selector you want to target. Say you want to target all the small texts in the section, you’ll use something like:

p{
 font-family: "Avant Garde Gothic Pro"
}

There are a huge number of CSS selectors you can use. If you need help identifying which one to use, feel free to let me know so that I’ll give it to you.

4

If you are still struggling - we’ve just added an AI assistant (beta feature) to the free ‘Font Pro’ app that helps you generate the correct CSS selectors for fonts - probably can solve your issue here