Custom Font: Using Different Font Weight for Headings & Paragraph

Hello,

I'd like to use a custom font (Satoshi) for my site. I found this code from a blog and it works properly for my Heading 1:

@font-face {

    font-family: 'Satoshi';

       src: url('Satoshi Bold URL that I uploaded into my Sq backend');

  }

h1 {font-family: 'Satoshi';}

My question is: what do I need to add into this custom CSS code if I want a different font weight for Heading 3 & 4 (ie. I want my H3 & H4 to be Satoshi Medium).

Thank you.

Hey! You just need to upload the Satoshi Medium font and specify this for h3 & h4.

So overall it would look something like this:

// Satohsi bold font //

@font-face {

    font-family: 'Satoshi';

       src: url('satoshi-font-file.squarespace.com');

  }

h1 {font-family: 'Satoshi';}

// Satohsi medium font //

@font-face {

    font-family: 'Satoshi-medium';

       src: url('satoshi-medium-font-file.squarespace.com');

  }

h3, h4 {font-family: 'Satoshi-medium';}

Or if you only have access to one file, you can look to adjust the font weight with code like this:

// Satohsi bold font //

@font-face {

    font-family: 'Satoshi';

       src: url('satoshi-font-file.squarespace.com');

  }

h1 {
font-family: 'Satoshi';
}

h3, h4 {
font-family: 'Satoshi';
font-weight: 300 !important;
}

5 minutes ago, bycrawford said:

Hey! You just need to upload the Satoshi Medium font and specify this for h3 & h4.

So overall it would look something like this:

// Satohsi bold font //

@font-face {

    font-family: 'Satoshi';

       src: url('satoshi-font-file.squarespace.com');

  }

h1 {font-family: 'Satoshi';}

// Satohsi medium font //

@font-face {

    font-family: 'Satoshi-medium';

       src: url('satoshi-medium-font-file.squarespace.com');

  }

h3, h4 {font-family: 'Satoshi-medium';}

Or if you only have access to one file, you can look to adjust the font weight with code like this:

// Satohsi bold font //

@font-face {

    font-family: 'Satoshi';

       src: url('satoshi-font-file.squarespace.com');

  }

h1 {
font-family: 'Satoshi';
}

h3, h4 {
font-family: 'Satoshi';
font-weight: 300 !important;
}

 

Hi Crawford, thanks so much! It works perfectly on my H1-H4 🙂

Any idea in how to apply the same style to Portfolio (Grid: Simple) here: https://www.neynarhm.com/works ? It seems like the project title is still following the native font from Squarespace.

Thanks again!