How can I change the menu font without affecting other headings?

Store Design
1

Hello,

I am trying to change the font of our side menu from Ovo to Avenir Next Rounded. thosewhobloom.com, Venue theme. It seems if I do this through the Typography settings it changes other headings that I don’t want to be changed.

Many thanks…

2

Hello @thosewhobloom

We have to create another Typography setting for only Menu.

It is lines of code that we have to do in liquid and CSS.

3

Hello @thosewhobloom ,

  1. Go to Online Store->Theme->Edit code
  2. Asset->theme.scss->paste bellow code in bottom of file
#shopify-section-header .primary-nav__item, #shopify-section-header .secondary-nav__item {
	font-family: Avenir Next Rounded;
}
4

Thank you so much for your time. I don’t think we have that particular asset theme.scss. I tried to do it in theme-critical.scss.liquid and theme.scss.liquid and both did not work.

5

Hello @thosewhobloom ,

Put your code in theme.scss.liquid file or theme-critical.scss file

When I inspect your site and add below code

#shopify-section-header .primary-nav__item, #shopify-section-header .secondary-nav__item {
	font-family: Avenir Next Rounded;
}

See the difference

2019-12-30_14-08.jpg
2019-12-30_14-08.jpg1727×593 161 KB

2019-12-30_14-08(2).jpg
2019-12-30_14-08(2).jpg1589×660 196 KB

6

@oscprofessional Hi, I my menu font is using the body font (which I chose in customize). Please show me how to turn it to the headings font (which I have already chosen in customize too). Thank you!

7

Hello @thosewhobloom ,

If you want to change the menu font without affecting other headings, please follow this tutorial. I hope you find it very helpful.

Thanks!