Heading Menu Font Issue ( Shopify Dawn Theme )

[dreamtechzone_5]

Hello Everyone!

I just want the menu headings NEVADA, TENNESSEE, COMPANY, SHOP as Highway Gothic (HWYGEXPD) in all versions. Please help me. Thank you.

Store: https://blue-chic-clothes.myshopify.com/

Password: Admin

[tim · Accepted solution]

Can go into "Custom CSS" of header section, or "Custom CSS" in theme settings, or at the bottom of the assets/base.css

nav summary.list-menu__item, 
nav .menu-drawer__close-button {
  font-family: var(--font-heading-family);
}

[dreamtechzone_5]

Great. It worked. Thank you very much.

[dreamtechzone_5]

I want to keep the "login" and "Language" text in Highway Gothic font.

[tim]

Make it

nav summary.list-menu__item, 
nav .menu-drawer__close-button, 
.menu-drawer__utility-links {
  font-family: var(--font-heading-family);
}

[dreamtechzone_5]

The heading menu font is not changing in mobile mode. I want to keep the heading menu font Highway Gothic in all versions of desktop, mobile, tablet, and laptop. I just want to change the heading menu font.

[tim]

hmm -- this is what I see:

[dreamtechzone_5]

But it's not showing here. why?

[dreamtechzone_5]

I can see it fine here but I can't see this font when I login on mobile, tablet. Have you checked on mobile?

[tim]

Ah, I did not really pay attention to the font look -- I kinda implied that actual loading of the font is already done.

And you're right -- this is not the font you want, this is a fallback font, "sans-serif", which can be different on different browsers/devices.

In your main browser you may still see the font you wanted because it may still be in browser cache since you've researched it.

And because we see the fallback font it means that font assignment is done properly, but the actual font file is not loaded.

Here is you problem -- you've added this to your assets/base.css:

@font-face {
  font-family: "Highway Gothic Expanded";
  src: url("{{ "HWYGEXPD.woff" | asset_url }}") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improves font loading performance */
}

However, liquid code is not processed in .css assets, and this is the reason that the font is not loaded -- the URL is not right.

Here is what you should do:

1. Remove this code from the base.css
2. Upload your font file to Files, not theme Assets -- Shopify often damages fonts uploaded to Assets (yours is damaged).
3. Add a "Custom liquid" section in your footer group (can also try Header group).
4. Paste this code there:

<style>
 @font-face {
  font-family: "Highway Gothic Expanded";
  src: url({{ "HWYGEXPD.woff" | file_url }}) format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improves font loading performance */
 }
</style>

[dreamtechzone_5]

Where do I paste this code? I will paste this code here instead of this one.

<style>
@font-face {
font-family: "Highway Gothic Expanded";
src: url({{ "HWYGEXPD.woff" | file_url }}) format("woff");
font-weight: normal;
font-style: normal;
font-display: swap; /* Improves font loading performance */
}
</style>

[tim]

Follow the steps 1-5 in my previous post.

Again -- these CSS rules use liquid code. Liquid is not processed in .css assets (as I wrote above), so it would not work in assets/base.css.