Jump to content

Custom styles within a course section

Recommended Posts

Hello!

I've added some very useful Custom CSS in my site so I can use branded fonts outside the Squarespace system. I'm a novice, but I've managed to make it work really nicely.

However, I've added a course section within the site and this is the only section where none of the custom font styles are carried over. Any idea why this is and how to get my original Custom CSS to carry through to the entire site?

Thanks! :)

Link to comment
  • Replies 2
  • Views 1.5k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

23 hours ago, robder said:

I've added a course section within the site and this is the only section where none of the custom font styles are carried over.

@robder When you override the default font for an element using CSS, the selectors that you use need to be at least as specific as those used by Squarespace. For example, if a heading element is an "h1" element with no special classes, you can just set the font using the selector "h1", like this:

h1 {
  font-family: myCustomFont;
}

However, if the element has specific classes - as many of the newer ones do - you'll also need to specify these, otherwise the default settings will "beat" your custom ones. For example:

.course-list .course-list__course-name {
  font-family: myCustomFont;
}

Of course, you'll need to identify the specific classes

Sometimes you can get around this issue by adding "!important" before the semi-colon (see example below), but this is a "sledgehammer" approach and can lead to unwanted results.

h1 {
  font-family: myCustomFont!important;
}

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 2 weeks later...

Hi, thanks for coming back.

I have some custom CSS loaded into my site already. For ref - I've copied this below.

It's working well throughout the site, until we reach the titling areas within the course pages.

I've attached a screengrab which shows how the title font has switched from Arial back to the default serif font...but only in these specific areas.

Are these controlled separately? If so, how do I do this?

UPDATE: I see you've put the following above:

.course-list .course-list__course-name {
  font-family: myCustomFont;
}

This has worked on the course home page (main title) but hasn't carried through to the individual lesson pages. So I'm almost there... 🙂

Thanks!

...

Here's my custom CSS at present:

 

@font-face {

    font-family: 'arlrdbd';

       src: url('https://static1.squarespace.com/static/621e334b7b2f321d631474cd/t/63242e0be6d27f32ad8a8f60/1663315467511/arlrdbd.ttf');

  }

h1 {font-family: 'arlrdbd';}
h2 {font-family: 'arlrdbd';}
h3 {font-family: 'arlrdbd';}

@font-face {

    font-family: 'Arial-Rounded-MT';

       src: url('https://static1.squarespace.com/static/621e334b7b2f321d631474cd/t/63242e01cf23a015b4799dca/1663315457104/Arial-Rounded-MT.Ttf');

  }

p1 {font-family: 'Arial-Rounded-MT';}
p2 {font-family: 'Arial-Rounded-MT';}
p3 {font-family: 'Arial-Rounded-MT';}

@font-face {

    font-family: 'ShadowsIntoLighttwo-Regular';

       src: url('https://static1.squarespace.com/static/621e334b7b2f321d631474cd/t/6331758eea35ce32d16dd63f/1664185742694/ShadowsIntoLightTwo-Regular.ttf');

  }

h4 {font-family: 'ShadowsIntoLighttwo-Regular';}

.markdown-block img {
 float: left;
 margin-right: 15px; 
}

.ml-onclick-form{
  padding: 10px 20px;
  background-color: #440090;
  color: #DFE0E1;
  border: solid 1px #DFE0E1;
}
.ml-onclick-form:hover{
  background-color: #212F76;
}

Screenshot 2023-10-26 at 10.33.11.png

Screenshot 2023-10-26 at 10.32.24.png

Edited by robder
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.