How To Add Your Own Custom Font To Squarespace Website Using CSS

 
How to add custom font to squarespace - trek your market

Download your font from the internet. I normally use 1001fonts.com for free downloads but there are many options available depending on what you need.

The downloaded fonts will save to your computer as a zip file. Make sure to open up that new file and locate the .ttf or .otf file. Save it to somewhere you can remember for access later.

Open up your squarespace site.

Within editing mode:

Click Design

Click custom CSS (open into new window)

Copy and Paste the following code:

Click manage custom files and upload your new font in the .ttf/.otf format

Delete the http:// … link

Hover your curser in between the (). Click the new font (located in the right side panel)

Delete “sacramento” and paste the name of your new font to replace.

The font name have to be EXACT. This includes spaces, capitalization, etc.

If you want to change the font outside of the page title:

Hover your mouse over the particular text you want to change.

Right click and select inspect

Under “element style” you will find a list of options regarding your text. Find the correct lable for the wanted text (h1, h2, h3, p …)

Switch the new label out with the old (#site page-title)

DONE!

If you need further explanation please watch the video or comment below.

Happy trekking!

-A.

CODE

@font-face
{
font-family: "Sacramento-Regular";
src:url(http://static1.squarespace.com/static/57585fc2859fd0f40ba2da63/t/5759c5b627d4bdf55809fa78/1465501111383/Sacramento-Regular.ttf) format(truetype);
}

h1.page-title{
 font-family: "Sacramento-Regular";
 
}