How can you add a custom font to the new Squarespace Course section/chapter titles?

Hi! I'm currently building my first course inside my site and I have custom fonts uploaded to Squarespace that I use throughout my site. I created a course page which is a new feature within Squarespace and was wondering how I can apply my custom fonts to the chapter titles/lesson titles? Right now they are assigned Mackinac Pro which is the site default font that's available right in Squarespace but I want to make it my brand's header font, GT Alpina.

Any code suggestions on how to do this? Would love to know how I can apply it to both the chapter titles and lesson titles.

Thanks!

Try this Custom CSS:

.course-list .course-list__list-course-item-lesson-name, .course-list .course-list__course-name, .course-list .course-list__list-chapter-item-chapter-name {
  font-family:'font-family-here';
}

Replace font-family-here with the correct name for the font family GT Alpina.

26 minutes ago, Ziggy said:

Try this Custom CSS:

.course-list .course-list__list-course-item-lesson-name, .course-list .course-list__course-name, .course-list .course-list__list-chapter-item-chapter-name {
  font-family:'font-family-here';
}

Replace font-family-here with the correct name for the font family GT Alpina.

This worked great on the main course page, thank. you so much!! Do you know how I could also do the lesson title on the individual lesson pages too? Like when you click on a lesson, it'll bring you to another page but the font is still the system default font there. 

Try this as well:

.course-item .course-item__intro .course-item__lesson-title {
  font-family:'font-family-here';
}

25 minutes ago, Ziggy said:

Try this as well:

.course-item .course-item__intro .course-item__lesson-title {
  font-family:'font-family-here';
}

Thank you so much! Was wondering if you had code to adjust the fonts in the course side navigation menu as well?

Well then, you'll need these selectors as well!

.course-item .course-item__side-nav-chapter-header .course-item__side-nav-chapter-title, .course-item .course-item__side-nav-link .course-item__side-nav-link-title {
  font-family:'font-family-here';
}

11 minutes ago, Ziggy said:

Well then, you'll need these selectors as well!

.course-item .course-item__side-nav-chapter-header .course-item__side-nav-chapter-title, .course-item .course-item__side-nav-link .course-item__side-nav-link-title {
  font-family:'font-family-here';
}

You are amazing!! The only other area I still need the font is on the individual lesson pages- on the top of the lesson video it has the name of the course in the old font and I want it to be GT Alpina. 

Last one, I promise! Thank you so much for your help. 

And this one!

.course-item .course-item__intro .course-item__chapter-title {
  font-family:'font-family-here';
}

If you can give my posts a like and mark as the solution that would be appreciated!

Combined changing Courses titles to custom font:

.course-item .course-item__intro .course-item__chapter-title, .course-item .course-item__side-nav-chapter-header .course-item__side-nav-chapter-title, .course-item .course-item__side-nav-link .course-item__side-nav-link-title, .course-item .course-item__intro .course-item__lesson-title, .course-list .course-list__list-course-item-lesson-name, .course-list .course-list__course-name, .course-list .course-list__list-chapter-item-chapter-name  {
  font-family:'your-font-family-here';
}

Thanks for consolidating everything! It doesn't seem to update where it says "Five Figure Branding Process Course" right at the top of the page which is still in the old font. Do you know what selector I could use for that? 

https://www.abbyleighton.com/five-figure-branding-process/niche-eszfp-xdf56

Use this selector:

.course-item .course-item__course-title

If you can give my posts a like and mark as the solution that would be appreciated!

Is there a chance you know how to selectively hide the course and lesson titles?! 

Mine are looking pretty messy and I'd like to remove all of them and just leave the little sidebar menu at the top without any of the other content.  

On 12/16/2023 at 2:07 AM, aunderwood said:

Is there a chance you know how to selectively hide the course and lesson titles?! 

Mine are looking pretty messy and I'd like to remove all of them and just leave the little sidebar menu at the top without any of the other content.  

You mean Remove "In this lesson"? Can you share link to this page?

On 10/25/2023 at 8:14 AM, Ziggy said:

Try this Custom CSS:

.course-list .course-list__list-course-item-lesson-name, .course-list .course-list__course-name, .course-list .course-list__list-chapter-item-chapter-name {
  font-family:'font-family-here';
}

Replace font-family-here with the correct name for the font family GT Alpina.

This worked great for the List view on Courses, but what about the grid view? How would I modify this code to use in the course Grid view?

On 4/1/2024 at 3:38 AM, coachellyn said:

This worked great for the List view on Courses, but what about the grid view? How would I modify this code to use in the course Grid view?

If you share link to Courses List view page, we can help easier

@tuanphan - how would you modify this code to work for Grid View in a course vs. List View?

On 4/29/2024 at 11:51 PM, xplrstudios said:

@tuanphan - how would you modify this code to work for Grid View in a course vs. List View?

I don't remember code. If you share link to page where you have problem, I can check easier.