Adding different heading fonts in the Dawn Theme

[NaomiRD]

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.

[LitExtension]

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!

[NaomiRD]

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]

Hi @NaomiRD,

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

Refer code:

.collage-section h3{
  font-family: 'Think Pink Regular' !important;
}

[NaomiRD]

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]

Hi @NaomiRD,

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

Hope it is clear to you.

[NaomiRD · 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]

Hi @NaomiRD,

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

[NaomiRD]

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]

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 🙂