Custom styles within a course section

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! :)

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  ⬇️

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

Edited October 26, 2023 by robder