How can I change the default menu font from 'Body' to 'Headings' in the Studio theme?

mben
Tourist
10 0 2

Hi, 

 

Please could someone help me?

 

I use the theme Studio. It automatically selects the 'body' font as the font to use for the menu. But I would like it to use the 'headings' font for the menu. 

 

My body font is called 'Roboto' and this is the font that is automatically used as the menu font. My heading font is called 'Cooper BT' and this is the font I am trying to use as my menu font. 

 

Basically I am trying to change the default font from 'Body' to 'Headings'.

 

Any help would be very much appreciated!

 

Thanks 🙂

 

Ben

 

 

Replies 10 (10)

suyash1
Shopify Partner
9148 1139 1489

@mben - can be done via c, can yo please share your website link?

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
mben
Tourist
10 0 2

Hi,

 

Sorry forgot to include it.

 

It's www.wyldfragrance.co.uk.

 

Thanks!

 

Ben

suyash1
Shopify Partner
9148 1139 1489

@mben - please add this css to the very end of your base.css file and check

 

.header__menu-item span, .header__submenu .header__menu-item{font-family: 'COOPER BT';}
To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
mben
Tourist
10 0 2
Hi,

Didn't work unfortunately.

Thanks,

Ben
suyash1
Shopify Partner
9148 1139 1489

@mben - can yo share your screenshot?

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session
mben
Tourist
10 0 2
Screenshot of the menu or the code? Thanks
suyash1
Shopify Partner
9148 1139 1489

@mben - menu

To build shopify pages use pagefly You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video using AI
Join me for beginner level training session

mben
Tourist
10 0 2
Hi,

Thanks for your message.

There's no direct option so I was hoping someone would be able to provide
the custom CSS to target the menu element and apply the 'headings' font.

Thanks,

Ben

PageFly-Oliver
Astronaut
861 180 161

Hi @mben ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
header *{
font-family: Cooper BT !important
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

LFKawy
Visitor
1 0 0

I had the same issue, and this works perfectly! Thanks.