CSS shows different result on Page CSS file vs Theme CSS file

Support
#1

Hi. I have a question about this site: http://wordpress-100914-318775.cloudwaysapps.com/

On the homepage, if you go to Admin > Edit Page > Pro > CSS, you will find this code:

/Navbar font/

@import url(‘https://fonts.googleapis.com/css?family=Montserrat’);
.hm4.x-menu > li > .x-anchor .x-anchor-text-primary{
font-family: ‘Montserrat’, sans-serif !important;
}

.hm4 .sub-menu .x-anchor .x-anchor-text-primary {
font-family: ‘Montserrat’, sans-serif !important;
}

which makes the navbar font look like this:

However, if you delete that same exact code and paste it into Admin > Appearance > Customize > Custom > Edit Global CSS,

it looks like this on the homepage:

Any reason why this is happening? I would like to keep the code in “Edit Global CSS” yet make it look like screenshot #1

#2

Hello There,

Thank you for the detailed post information. Please be advised that this is the order of the css being applied on the page;

  • Stack style.css
  • Child theme’s style.css
  • WP defaults Additional CSS
  • X Global CSS (customizer’s custom css)
  • Cornerstone’s Page CSS

There could be a code that made the font bolder or thinner overriding the css between the Global and Page custom css. I would suggest that you group your custom css and indent it so that you can easily figure out which one is overriding the other.

Hope this explains it briefly.