How do I add a webfont to Squarespace?

If you're willing to pay

We 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 we've also created video tutorials where we'll show you how to install fonts to Squarespace.


Do it yourself for free

  1. When buying or downloading the font make sure to get a webfont license. A common mistake is to accidentally buy a desktop licence which will not work.

  2. After buying/downloading fonts there’s usually a .css file included in the .zip file. Open in a text editor and copy-paste everything to your Squarespace site’s Custom CSS section.

  3. 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 need to upload the font in several formats (usually .eot, .ttf/otf, .woff, .woff 2 and sometimes .svg). Make sure to upload all formats for maximum browser support.

  4. Inside Custom CSS you have to replace the URLs with the font files. The URL's look something like this: 'example-font-name.ttf'. Select the URL inside the ' ' marks and hit backpace to remove the URL. 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.

  5. Repeat the steps 3 more times to replace all the URLs with the font files you've uploaded.

  6.  Remove every instance of 'http:' so the URL's begin with just '//static.squarespace...' 

NOW YOUR RESULT SHOULD SOMEWHAT LIKE THIS

If you have only received the font files but not the CSS from your font provides, you can copy-paste the CSS below to your Custom CSS field and then use MANAGE CUSTOM FILES button to add the correct URLs.

If you have only received .woff and .eot files, use this CSS code:

You can now try out your webfont by adding the following code to Custom CSS -field

Use your font on all headings

Use the font as body text / paragraphs

Need help?

As we do have to pay our rents we can only offer paid support for custom fonts. If you have problems installing fonts, hit us up with a message and we’ll install the fonts for you.


Previous
Previous

How to install Facebook Messenger customer chat plugin to Squarespace