Menu is showing different formatting for different pages - dawn theme

Shopify Discussion
, ,
1

hi, i formatted my menu so it matches our brand font. this works fine on the home page and product page (shown in image). However, on the contact page, blog page, and blog posts, the menu is different and shows a completely different formatting (second image shown). Can anyone help me fix this?

image
image1880×813 414 KB

image
image1897×832 163 KB

2

I just double checked it is happening on all the policy pages too

4

I added this custom css to the header on the edit store section

.header__menu-item {
font-size: 24px;
z-index: 2;
}

and I added this to my base css

@font-face {

font-family: ‘Bebas Neue’;

src: url(‘{{ “bebasneue.woff2” | asset_url }}’) format(‘woff2’);

font-style: normal;

font-weight: normal;

}

.header__menu-item {

font-family: ‘Bebas Neue’, sans-serif !important;

}

6

Your theme is Dawn, your asset is base.css
Shopify does not process Liquid code in .CSS assets, so this code

@font-face {
  font-family: Bebas Neue;
  src: url('{{ "bebasneue.woff2" | asset_url }}') format("woff2");
  font-style: normal;
  font-weight: 400
}

does not render proper URL.

Your homepage still works because PageFly loads this font too, I guess the same is on the product page…

The way I usually recommend – add a “Custom liquid” section to the “Footer” section group in “Edit theme”(formerly Customize) and paste your CSS code there, wrapped with <style> and </style>.

One warning though – uploading your fonts to the theme assets is known to damage the font file.
You’d be better off uploading to Files and using file_url instead of asset_url

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it