How to Change Header Menu Tags for Custom Fonts

Store Design
, , , ,

Topic summary

Issue: Custom font applied via the AZ Fonts app to the body tag was cascading to header menu items. The user wanted a different font for the header menu and to move the “About” menu item to the right near the search/cart icons.

Proposed fix: Add CSS in Online Store > Customize > Theme Settings > Custom CSS to target specific elements, e.g.: h2.rich-text__heading { font-family: poppins !important; }. Replace with the desired font. Screenshots of the header and the AZ Fonts interface were provided and are relevant.

Follow-up: The user noted AZ Fonts was overriding h2 fonts and the menu repositioning remained unresolved. They then solved the font issue by using a more specific element selector instead of .h2, successfully separating header text styling from the body/app override.

Outcome: Font styling for header/menu items resolved through a more specific CSS selector that overrides AZ Fonts for targeted elements. No confirmed solution was provided for moving the “About” link to the right; that item appears unresolved. The thread concluded with acknowledgment and a request to mark the solution.

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

Hi! I’m using AZ Fonts app to bring custom fonts to my Shopify Basic page. I noticed, when I specified one font for the Body Tag in AZ fonts, that it also affected my Header Menu items, which must be attached to the ‘body’ tag. I have basic CSS knowledge but I’m having a hard time designating the Header Menu Items as ‘h1’ or ‘h2’ because I can’t find their designation within the back end. You’ll see in the below screenshot how the “About” page has the custom font as an h1, but I’d love to find a way to designate a different header style for the Header Menu Items as well, so both are affected (not necessarily at the same h1 scale).

I’d also love to move the “About” Menu Item over to the right side of the page, next to the search and cart icons. Having a hard time figuring this out in the back-end as well.

Attaching photos of website header (freak-flag.com), as well as AZ Fonts app interface. Happy to share any back-end files, just let me know which ones (theme.liquid, base.css, or header.liquid).

Thanks in advance for the help, losing my mind over here.

Screenshot 2024-12-21 at 1.13.28 PM.png
Screenshot 2024-12-21 at 1.13.28 PM.png2742×1392 257 KB

Screenshot 2024-12-21 at 1.13.55 PM.png
Screenshot 2024-12-21 at 1.13.55 PM.png2194×1902 178 KB

2

Hi @frkflg2024

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
h2.rich-text__heading {
    font-family: poppins !important;
}

Here is the result: https://prnt.sc/ik0blx6Q3MaE

Please change the font inside the code with the one you want

Best,

Daisy

3

Thanks Daisy! This helps me separate the header text from the body tag, but it’s still not working. My AZFonts app is set to apply “LydianBT-Bold” to h2 text, and I don’t know how to designate a specific font in the CSS when the app is set to override it anyways. Also, I’m still struggling to figure out how to move the “About” over to the right side of the page.

Thank you for your help!

4

Actually, I was able to figure this out! Daisy, I did use your code but subbed in a specific element tag in place of the .h2. This helped. Thank you again!

5

Hi @frkflg2024

Great job :heart: I am glad this helps. I would be grateful if you can give us a like or marking it as a Solution!

Best,

Daisy