In Courses - Trying to change the displayed course title font

Any help greatly appreciated, 

I've been trying to change the h1 font to Adobe Handwriting Ernie (it's already used elsewhere in my site) on my Course Overview Page (hoping it will translate to the titles on other pages of the course). I don't want to make the sitewide change for all h1.  I've put the following code into the course settings' header code injection box -

h1, h1 * { 
    font-family: "adobe-handwriting-ernie" !important;
}

Help?

R 🙂

Amazing.  Thanks so much, works a charm! 

Related question: I'd like to adjust the font size of my course title to better accommodate mobile view (the current title is splitting the first word in mobile) without changing overall h1 style for my site. 

Would love to know EITHER:
A: How to reduce course title font size
B: How to adjust for mobile responsiveness

...any thoughts appreciated!
THANK YOU

On 4/3/2024 at 1:41 AM, well_hello_jamie said:

Related question: I'd like to adjust the font size of my course title to better accommodate mobile view (the current title is splitting the first word in mobile) without changing overall h1 style for my site. 

Would love to know EITHER:
A: How to reduce course title font size
B: How to adjust for mobile responsiveness

...any thoughts appreciated!
THANK YOU

You can share link to page where we can see course title, we can give you code to do these easier

@tunaphan - thanks for your help! The page is: https://www.jamiephillips.coach/reset-beta 

On 4/6/2024 at 4:22 AM, well_hello_jamie said:

@tunaphan - thanks for your help! The page is: https://www.jamiephillips.coach/reset-beta 

You can use this CSS code

h1.course-list__course-name.course-list__header-content {
    font-size: 38px !important;
}

@tunaphan - thank you! That did allow me to adjust header font size but I'm still getting a weird word-split in mobile view... will keep experimenting. Thanks! 

On 4/9/2024 at 4:18 AM, well_hello_jamie said:

@tunaphan - thank you! That did allow me to adjust header font size but I'm still getting a weird word-split in mobile view... will keep experimenting. Thanks! 

Can you take a screenshot of problem?

@tunaphan sorry for the delayed reply on this. That code *does* modify the course title but, if it's small enough not to break the word "revolutionary" in mobile view, the title font size looks weirdly small on desktop. 

This might be wishful thinking, but is there a way to scale for mobile only view? (Or another solution?) 

THANK YOU!

On 4/7/2024 at 5:15 PM, tuanphan said:

You can use this CSS code

h1.course-list__course-name.course-list__header-content {
    font-size: 38px !important;
}

 

To apply it for mobile only, use this CSS code

@media screen and (max-width:767px) {
h1.course-list__course-name.course-list__header-content {
    font-size: 30px !important;
}
}