neynarhm Posted December 20, 2022 Share Posted December 20, 2022 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
bycrawford Posted December 20, 2022 Share Posted December 20, 2022 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; } neynarhm 1 Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com Sign up to the waitlist for my course 👇sixfiguresquare.space 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
neynarhm Posted December 20, 2022 Author Share Posted December 20, 2022 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 bycrawford Posted December 20, 2022 Solution Share Posted December 20, 2022 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...*/ } neynarhm 1 Sam Crawford | by Crawford. Multi-award-winning Squarespace expert e. sam@bycrawford.com w. bycrawford.com Sign up to the waitlist for my course 👇sixfiguresquare.space 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment