How do I add a webfont to Squarespace?
If you're willing to pay
I offer font installation as a service. I've done this for several happy clients around the world. This is a good choice if you're not very comfortable tinkering with CSS-code.
And I've also created video-tutorials you can get on my shop where I'll show you how to install fonts to Squarespace by recording my own screen as I go over it step-by-step.
Do it yourself for free
- When buying or downloading the font make sure to get a webfont license. Common mistake is to accidentally buy a desktop licence which will not work.
- After buying / downloading fonts there's usually a .css file included in the .zip -file. Open in in a text editor and copy-paste everything to your squarespace site Custom CSS -field.
- Under the Custom CSS -field click MANAGE CUSTOM FILES -button and click the ADD IMAGES OR FONTS -button. Upload your font-files one by one. You will upload the font in several formats (usually includes .eot, .ttf/otf, .woff, .woff 2 and sometimes .svg). Make sure to upload all formats for maximum browser support.
- Inside the Custom CSS you have to replace the urls to the font files. The url's are inside 'something/example-font-name.ttf' - things inside quotes. Select the url inside the ' ', hit backpace to remove it. Then while your cursor is inside the '' -quotes click on MANAGE CUSTOM FILES and click the correct file to paste the correct url to it.
- Repeat the steps 3 more times to replace all the urls with the font files you've uploaded.
- Remove every instance of 'http:' so the url's begin with just '//static.squarespace...'
Now your result should somewhat like this
If you only receive the font-files but not the CSS, you can copy-paste the CSS below to your Custom CSS -field and then use MANAGE CUSTOM FILES to add the correct urls
If you only receive .woff and .eot -files use this CSS code