Adding different heading fonts in the Dawn Theme

Solved
NaomiRD
Excursionist
42 1 1

Hi

 

I have recently added my own heading and body fonts to the Dawn theme (thank you @LitExtension ) but I would now like to alter some of the heading fonts within the different sections.

 

For example - the collage section. I would like the headings in this section to use the body font, rather than the heading font which its defaulted to do. I love my heading font but its a little difficult to read when displayed at this size.

 

Or, if there is an easy way to enlarge the custom font, I could do that instead.

 

Accepted Solution (1)
NaomiRD
Excursionist
42 1 1

This is an accepted solution.

Hi @LitExtension 

 

Thank you again. This has helped me format my website exactly the way I wanted. You've been a great help once again.

 

Happy New Year

View solution in original post

Replies 9 (9)
LitExtension
Shopify Partner
4860 1001 1115

Hi @NaomiRD,

You can add custom font code for each section. 

For example - the collage section: Go to Assets > base.css and paste this at the bottom of the file:

.collage-wrapper-title{
  font-family: 'Think Pink Regular' !important;
}

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
NaomiRD
Excursionist
42 1 1

Hi @LitExtension 

 

Thank you. I assume its a similar format for the other headings? I just need to find the corresponding heading within each block.

 

For example - within the collage section, it has a heading for each block. Im guessing these are labeled with .h3 or or similar to the above but would need to look at the collage section code to find out?

 

Many thanks

LitExtension
Shopify Partner
4860 1001 1115

Hi @NaomiRD,

Yes. But it's not '.h3', it's just 'h3'.

Refer code:

.collage-section h3{
  font-family: 'Think Pink Regular' !important;
}
LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
NaomiRD
Excursionist
42 1 1

Hi @LitExtension 

 

Thank you so much for this. I tried to apply a similar code to the feature-collection section but it didn't work. So instead of .collage-section h3, I used .featured-collection-section h3 underneath in the base.css file. Should I be using something different?

 

 

LitExtension
Shopify Partner
4860 1001 1115

Hi @NaomiRD,

For feature-collection section you need to use class '.collection'.

Screenshot_9.png

Hope it is clear to you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
NaomiRD
Excursionist
42 1 1

This is an accepted solution.

Hi @LitExtension 

 

Thank you again. This has helped me format my website exactly the way I wanted. You've been a great help once again.

 

Happy New Year

LitExtension
Shopify Partner
4860 1001 1115

Hi @NaomiRD,

If it helped you solve your issue, please mark it as a solution for me. Thank you and good luck.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
NaomiRD
Excursionist
42 1 1

HI @LitExtension 

 

This has helped a great deal but I thought I had already done this? On my feed its showing as an accepted solution. Is this not the same for you?

savanna1234
Tourist
6 0 2

Hi @LitExtension hope you are well!

 

Any ideas please what the title of the code would be to change the font on

- Buttons

- Page Titles

- Drop Down Menu (I did the below for this and it only changed on desktop, not mobile)

 

.header__menu-item span { font-family: 'Poppins' !important; }

 

All the best 🙂