What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

lextui
Excursionist
25 0 7

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. 

Accepted Solutions (2)

Savior
Shopify Partner
537 108 161

This is an accepted solution.

@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

banned

View solution in original post

Savior
Shopify Partner
537 108 161

This is an accepted solution.

@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
banned

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
37445 3664 12119

@lextui 

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

but now your store password protect 

If helpful then please Like and Accept Solution. Partnership of your ️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store Hire Me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lextui
Excursionist
25 0 7

Hi, thanks for reaching out. The password is cookiebutter

lextui
Excursionist
25 0 7

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. 

Savior
Shopify Partner
537 108 161

@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

banned
lextui
Excursionist
25 0 7

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! 

Savior
Shopify Partner
537 108 161

@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
banned
spookiesdream
Excursionist
30 0 10

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?:)

 

Thnx a lot!

Savior
Shopify Partner
537 108 161

This is an accepted solution.

@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

banned
lextui
Excursionist
25 0 7

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)? 

Savior
Shopify Partner
537 108 161

This is an accepted solution.

@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
banned
lextui
Excursionist
25 0 7

Thank you so much! This worked perfectly.