Can't seem to change the footer heading fonts to my custom font

Store Design
,

Topic summary

  • Issue: In a Shopify Symmetry theme, a custom font (“Peaches”) applied sitewide via an app wasn’t affecting footer headings. The user tried adding @font-face and setting h6 { font-family: ‘Peaches’ } in the Footer’s Custom CSS, but it had no effect.

  • Key detail: Footer headings in this theme don’t use generic h6 styling; they rely on specific classes, so the initial selector lacked the necessary specificity.

  • Solution: Use the theme-specific selector to override the footer heading style: .section-footer .section-footer__title { font-family: ‘Peaches’; }. This directly targets the footer title element used by Symmetry.

  • Outcome: The user confirmed the CSS fix worked. The issue is resolved; no further actions or open questions. The provided CSS snippet is central to the resolution.

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

I am using the Symmetry app and have been using an app to change my fonts and it has worked on everything BUT my footer headings. Can anyone help me with how to code this? I tried going to the Custom CSS for the Footer section and doing the following:

@font-face { font-family: ‘Peaches’; src: url(‘https://cdn.shopify.com/s/files/1/0597/9632/4429/files/littleribbon-webfont.woff2?v=1723500901’); }

h6 {
font-family: ‘Peaches’}

However I had no luck. Can anyone help me with how to code this and where it should go? TIA! (for reference my website is www.littlepeachpjs.com)

2

Hi @littlepeachpj

Please use this code and check again.

.section-footer .section-footer__title { font-family: 'Peaches'; }

Screenshot 2024-08-15 at 08.47.06.png
Screenshot 2024-08-15 at 08.47.06.png1939×485 30 KB

1 Like
3

Amazing! Thank you so much!