Jump to content

Custom Font: Using Different Font Weight for Headings & Paragraph

Go to solution Solved by bycrawford,

Recommended Posts

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.

Link to comment

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

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
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!

Link to comment
  • Solution
3 hours ago, neynarhm said:

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!

Hey! Use this selector:

.portfolio-grid-basic .grid-item .portfolio-title {

 /*paste code in here...*/

}

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
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.