H4 not displaying correctly

Site URL: https://tracytredoux.com/code-test

Hi,

I'm trying to add H4 styling in a code block, at the top of the page but the font family (proxima nova) does not display correctly. When I add the text as a span style it displays fine but as H4 it is incorrect. I have also tried putting the code directly into custom CSS and the site-wide header inection code with the same result.

It would be great to know what I'm doing wrong here.

Many thanks!

<style>
   h4{
     font-size:1.2em; 
     color:#ffbfc2; 
     font-family:proxima nova ; 
     margin-bottom:-0.5em
  }

</style>

<h4>Pre-ovulation</h4>

<span style="font-family:proxima nova ; color:#ffbfc2; font-size:1.2em">Pre-ovulation</span>

Hi @Phobic78

You need to adjust the font weight on your h4 heading

h4 {
    font-size: 1.2em;
    color: #ffbfc2;
    font-family: proxima nova;
    margin-bottom: -0.5em;
    font-weight: 300;
}

Hope that helps

42 minutes ago, meganheath said:

Hi @Phobic78

You need to adjust the font weight on your h4 heading

h4 {
    font-size: 1.2em;
    color: #ffbfc2;
    font-family: proxima nova;
    margin-bottom: -0.5em;
    font-weight: 300;
}

Hope that helps

Thanks @meganheath,

So you're saying that 'span style' reads a weight name, such as 'bold' or 'light', while a class definition needs it to be specified as 'font-weight'?

1 minute ago, Phobic78 said:

Thanks @meganheath,

So you're saying that 'span style' reads a weight name, such as 'bold' or 'light', while a class definition needs it to be specified as 'font-weight'?

You can use bold/light or a value.

This specific issue had to do with the fact that the h4 tag already had a font-weight:bold; set by Squarespace. So you needed to override this in your css. (see image below)

The span style is set by the inline css you've added to the tag. 

29 minutes ago, meganheath said:

You can use bold/light or a value.

This specific issue had to do with the fact that the h4 tag already had a font-weight:bold; set by Squarespace. So you needed to override this in your css. (see image below)

The span style is set by the inline css you've added to the tag. 

 

Ah yes, I understand it now and it's working for me. Thanks a lot!