Add custom font to navigation text and product titles (on product pages) only on Dawn 2.0 theme

Store Design
1

I’d like to add a custom font to the following sections of my website:

  • navigation text on header (New, Shop, About)
  • product title on product page (Ex. Griffith)
  • additionally, is there a way to adjust the font size on the header?

I followed this tutorial and all the text turned into the custom font. I tried removing parts of the code (h2,h3,h4,h5,h6,html,body) and left H1 but all text still uses the custom font.

The rest of the text should be Shopify’s system font serif. Please see the store URL and password below:

https://souvenir-the-store.myshopify.com

cookiebutter

I’d really appreciate your help! Thank you.

1 Like
2

@lextui

Sorry you are facing this issue, it would be my pleasure to help you.

but now your store password protect

3

Hi, thanks for reaching out. The password is cookiebutter

4

@lextui

Always take a backup of theme before making any changes.

  1. Go to your code editor > Assets > base.css and paste this lines at the bottom of the page:
h1.product__title, .list-menu {
font-family: "Love" !important
}
a.header__menu-item {
    font-size: 16px;
}

Also please check where you have added this >> https://prnt.sc/228zq4j and replace the font-family value with ‘var(–font-heading-family)’ >> https://prnt.sc/228zsih

You can adjust the font-size by increasing or decreasing the px value.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

1 Like
5

Thanks for this! The custom font is now on the product title (in the product page). Is there a way to use the font for the page titles and navigation text (New, Shop, About)?

6

@lextui

you can add this:

.page-title, .header__menu-item span {
font-family: "Love" !important;
}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

1 Like
7

Thank you so much! This worked perfectly.

8

Hi, alternatively is there a way to use my custom font for the “image with text” section? I’m looking to use it for the main text as seen in this image, while keeping serif for the description.

9

@lextui

Add this

h2.image-with-text__heading.h1 {
    font-family: 'Love' !important;
}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

1 Like
10

That was quick! Thank you so much.

Lastly, is there a way to use the custom font for collection titles?

The code you gave worked on the page titles like About Us, Contact, FAQ, etc. I hope to use the font for collection titles as well!

11

@lextui

Add this:

h1.collection-hero__title { font-family: ‘Love’ !important;

}

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on shopify.dev.34@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme

12

Hi,

I know this is an older topic but I couldn’t make it work on my main menu.

Could you please help me if you’re around?:slight_smile:

Thnx a lot!