Jump to content

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

Recommended Posts

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!

Link to comment

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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. 

Link to comment

Try this as well:

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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';
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
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. 

Link to comment

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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';
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 1 month later...
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.  

Screenshot 2023-12-15 104645.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...
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?

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.