Adding a custom font in Squarespace is really easy. Just use the following CSS:
@font-face {
font-family: 'NAME';
src: url('FONT URL');
}
h1 {font-family: 'NAME';}
Simply scroll down to just below the CSS window and click 'Manage Custom Files'. Then, select the font file you want to upload from your computer and boom... step one complete.
Then, paste in the CSS and replace NAME with the name you'd like Squarespace to recognise the font by, and URL with the URL of the font you just uploaded. You can find this by going back to 'Manage Custom Files' and clicking on the font. The link will insert automatically wherever your cursor is currently placed.
Finally, add the final line of code.
h1 {font-family: 'NAME';}
Squarespace uses h1, h2, h3 and body/p text by default. Change 'h1' if you want it to be h2 etc and then change NAME to the name you just gave the font in the previous step. And that's it!
If you want to take it further, you can add styling for size, spacing, shadow, line height... etc etc.
Please like and subscribe if you found the video useful and let me know in the comments on through my blog if there is you would like me to make a Squarespace SOS video on!
8 авг 2024