Change font of header menus to body on desktop (currently set as heading for mobile)

[ads18922]

Hello, i would like to change the font of my header menus from heading to body on desktop only:

my store is www.marencio.com , horizon theme

[Medo_BWF]

The font changing option should be in the customization page trying checking it out, if that doesn’t work you might have to use custom css to make the edit or make the changes in the theme code, let me know if you need further assistance.

[Dan-From-Ryviu]

Please add the following code to the Custom CSS section in the theme settings.

@media (min-width: 750px) {
  .menu-list__link {
    font-family: var(--font-family) !important;
  }
}

Best regards,
Dan from Ryviu: Product Reviews App

[AnneLuo]

Hi, @ads18922
You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
overflow-list .menu-list__link-title {
font-family: ‘Inter’ !important; // change your font name
}
</style>

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

[tim_1]

Shouldn’t it be like this?

@media (min-width: 750px) {
  .menu-list__link {
    font-family: var(--font-body--family) !important;
  }
}

Since --font-family is not defined…

[websensepro]

Hello, @ads18922

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 990px) {
  .header__inline-menu .list-menu__item .header__menu-item {
    font-family: var(--add your own font family !important);
  }
}

Thank You!

[eFoli-Marvic]

Hello @ads18922

You can try this solution:

1. From your Shopify Admin, navigate to Online Store → Themes.
2. Select your Horizon theme, and click on Actions → Edit Code.
3. In the left-hand sidebar, under Layout, find and click on theme.liquid. This is the file where you’ll add the custom code.
4. • Scroll down to find the closing </head> tag. * Add the following code right before it:

@media (min-width: 750px) { .menu-list__link-title { font-family: 'Inter', sans-serif !important; /* Replace 'Inter' with your desired font */ } }

I hope this will help you. If it does, kindly give it a thumbs up and mark it as a solution. Thank you.