How can I adjust the weight and size of my menu font?

[sophiaemli]

Hi!

I am using the Montserrat font in my menu bar but because I set the font in general to "medium" it now shows up as "medium" in the menu as well, but I want it to be semi bold. 

I tried adding CSS code direkty to the custom CSS on the website: 

 {
  font-family: "Montserrat";
  font-weight: 600;
   font-size: 28px;
}

but it just goes from light to bold when I adjust the weight from 500 to 600 and skips all the nuances in between. Also adjusting the font-size doesn't change anything, I want to make it slightly larger.

Thank you for your help!! 🙂 

[Moeed]

Hey @sophiaemli 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
.header__menu-item span {
    font-weight: bold !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[sophiaemli]

Hi @Moeed 

I've added the code, but the weight is still set on medium in the menu bar, is there a specific code for "semi bold" ? I found this on a shopify page, should I try to include "montserrat_n5" in the code?

[PageFly-Richard]

Hi @sophiaemli 

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->Base.css or theme.css or styles.css

.header__menu-item span {
    font-family: "Montserrat" !important;
    font-weight: bold !important;
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly