You will find many questions in the Squarespace forums about setting up custom fonts, and most of them don't really provide a whole answer. Here is what you need to know. Lets start with browser support, Squarespace only supports modern browsers, so there is not a need to install legacy font types.

There is an excellent resource available to help determine if something is compatible with a browser. A quick search on caniuse.com tells us that .woff font format is supported by the same modern browsers that Squarespace documentation states.

The simplest custom font integration is with the use of a service like Google Fonts or a paid font service. I will show you how to setup a custom font from Google Fonts and a font you have downloaded.

Google Fonts

Step 1.

We are going to setup a custom Google font called Pacifico. If we navigate to the quick use page for the font, we will see a few options. The simplest setup with Squarespace is to use the Standard option. Simply copy and paste the code that is on the page, it should look similar to the following.

<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>

Step 2.

Next we need to open a new window to our Squarespace site. Keep the Google fonts window available, as we need to get one more setting from that page. Navigate to the Code Injection page. /config/settings/advanced/injection

In the Header section paste the link code from above into the area. It should look like the following image.

Step 3.

Then we need to save those changes and navigate to the Custom CSS page. /config/design/custom-css

Navigate back to the Google Fonts page and copy step 4 (Integrate the fonts into your CSS). It should look similar to the following.

font-family: 'Pacifico', cursive;

Then go back to the Custom CSS page on your Squarespace site and add the font-family snippet to any element you want the custom font applied.

This is the part that is not super straight-forward with other articles. Squarespace does not allow you to add custom fonts to the Style Editor. So, going forward you will need to understand a little bit about HTML. Also, each Squarespace template uses different classes and convention, so it is best to use a tool like, Chrome Developer Tools or Firebug to inspect the elements on the page. The following is a quick sample of what your Custom CSS should look like when targeting a couple elements.

h3,
.page-description{
    font-family: 'Pacifico', cursive !important;
}

Here is the contact page from the Lange template and the Pacifico font using the above CSS. I am using the !important tag attribute to aide in the some of the font setup, as Squarespace sometimes targets the elements stronger that the simple version as above.

Custom Font

We are going to setup a custom font called Veneer. As I mentioned above, we only need the .woff file from the download package you may have purchased.

Step 1.

Navigate to the Custom CSS page. /config/design/custom-css

I prefer to work in the Custom CSS area by clicking on the "Open in Window". This provides a bit more room to work. Click on Manage Custom Files button at the bottom of the window. Then click on "Add images of fonts". This area will allow you to upload most any asset you want to include in your Squarespace site. After you upload the .woff file you should see something similar to the following.

Step 2.

Now we need to setup the font for use as a font-family designation. We are going to use the following code and update the name and URL to the file we just uploaded.

@font-face {
    font-family: myFirstFont;
    src: url(myFirstFont.woff);
}

Paste the above code into the Custom CSS area and you should have something simlar to the following.

Next, update the font-family name to something more relative; I will be using veneer. The highlight the filename in the src: url and press delete. Ignore the dropdown with the filename. This doesn't seem to work consistently to select a file.

Then click on the sidebar item with the font we uploaded earlier. This should put the entire URL to the custom font in the area we just deleted.

This is the final CSS for my site. Note: Your URL will be different.

@font-face {
    font-family: veneer;
    src: url(https://static1.squarespace.com/static/576b3ea02e69cfe8cbca2a0b/t/576d6c11be659404dc4f817c/1466788883158/veneer-webfont.woff);
}

Step 3.

The last step is to add the font-family snippet to any element you want the custom font applied.

This is the part that is not super straight-forward with other articles. Squarespace does not allow you to add custom fonts to the Style Editor. So, going forward you will need to understand a little bit about HTML. Also, each Squarespace template uses different classes and convention, so it is best to use a tool like, Chrome Developer Tools or Firebug to inspect the elements on the page. The following is a quick sample of what your Custom CSS should look like when targeting a couple elements.

h3,
.page-description{
    font-family: 'veneer' !important;
}

The Custom CSS page should look something like the following, which includes the font setup and element designation for the custom font.

@font-face {
    font-family: veneer;
    src: url(https://static1.squarespace.com/static/576b3ea02e69cfe8cbca2a0b/t/576d6c11be659404dc4f817c/1466788883158/veneer-webfont.woff);
}

h3,
.page-description{
    font-family: 'veneer' !important;
}

Here is the contact page from the Lange template and the Veneer font using the above CSS. I am using the !important tag attribute to aide in the some of the font setup, as Squarespace sometimes targets the elements stronger that the simple version as above.