How To Add Custom Fonts To Your Squarespace Website


Squarespace offers a pretty large selection of fonts that you can use on your site.

They've got their own font list for you to choose from, Google font integrations, and you can even connect your Typekit account for an even wider selection!

However, Squarespace does not have it all when it comes to font variety. Yes, they offer tons of beautiful fonts, but what if you have (or even downloaded) a font that is specific to your brand? You search and search but it's nowhere to be found on Squarespace’s list. What are you supposed to do, just forget about it and settle for an available one?

NO WAY!

With this quick and easy tutorial, I'll show you how you can upload and use ANY font on your Squarespace site!

 
 
How To Add Custom Fonts To Your Squarespace Website - A Step By Step Tutorial
 
 

Please note that these steps do involve some coding, but don’t freak out if you’re not css savvy, I’ll be showing you every step of the way!

What you’ll need:

✓ Your awesome, amazing self

✓ Your font file (name ends with either .otf or .ttf)

✓ A computer (obvs lol)

 

Step 01 - Upload the font to your site’s custom files

Make sure that you have your font’s file available and ready to go. If you downloaded it, please make sure you have full rights to usage before extracting and unzipping.

Screen Shot 2019-03-05 at 1.08.39 AM.png
Screen Shot 2019-03-05 at 1.03.01 AM.png

In your Squarespace website menu, click Design Custom CSS. Scroll to the bottom and click on the 'MANAGE CUSTOM FILES' button located at the bottom, this will open your Custom Files panel. Click on the ‘Add images or fonts’ button. Find and select the font file of your choosing (this will end with either .otf or .ttf) and click 'Open'. This will successfully upload your font to your Custom Files collection.

 

Step 02 - Add the font to your site’s css

In order for your uploaded font to be used on your Squarespace website properly, you’ll need to add a line of code to your site’s CSS in order for your website to understand.

Screen Shot 2019-03-05 at 1.14.25 AM.png
Screen Shot 2019-03-05 at 1.14.50 AM.png
Screen Shot 2019-03-05 at 1.15.58 AM.png
Screen Shot 2019-03-05 at 1.16.28 AM.png

Click on a blank area in your CSS Editor and paste the following code: @font-face { font-family: “FONT NAME”; src: url(“

Replace the text FONT NAME with the name of the font you just uploaded (for example: Times New Roman).

Click your cursor at the end of that code to keep your text cursor idling there, then go to the Custom Files panel on your right and click on the font file that you just uploaded (this will easily paste the url for your font right at the end of the code).

Now, paste the following code directly behind that: ”); }

 

Step 03 - Use your custom font on your Squarespace website

Now that you've got your font uploaded and adding to your Squarespace site, you can use it two different ways…

Option 1 - Set it as a text style

In your CSS Editor, you can paste any of these codes in order to set your font as a specific text style on your site:

h1 { font-family: “FONT NAME”; }

h2 { font-family: “FONT NAME”; }

h3 { font-family: "FONT NAME"; }

body { font-family: "FONT NAME"; }

Just replace FONT NAME with the font-family name you entered during the uploading process.

For reference: h1 is Heading 1, h2 is Heading 2, h3 is Heading 3, and body is Normal. In order to use them around your site, just add a text block and select the appropriate text style from the dropdown menu.

You can even go a step further and create a Heading 4 (h4) by using the following: h4 { font-family: "FONT NAME"; }

Unfortunately, Squarespace does not have a Heading 4 text style option, so you’ll need to code these in every time (don’t worry, it’s easy). Keep reading for the steps on how to do that…

Option 2 - Use it decoratively and/or sparingly throughout your site

If you don’t want to set your custom font as a specific text style OR if you decided to add a Heading 4, you’ll need to add and use a code block every time you want to add this custom font to the content on your site.

When you want to use your custom font as a decorative add on, paste the following code into your code block:

<p style="font-family: INSERT FONT NAME HERE">YOUR TEXT</p>

Replace INSERT FONT NAME HERE with the name of your font. Then replace YOUR TEXT with your actual text.

Now, this code on it’s own is great for single word or sentence usage. However, if you want to use this font next to another text style within the same sentence, you’ll need to add a bit more to the code block. Let’s say you want to have a “text style sandwich” with your custom font in between two words (lol can you tell I’m hungry?). These codes can be moved around depending on your sentence and what you want to adjust but I’ll show you the gist of it. Paste paste the following code(s) into your code block:

<h1 style>YOUR <span style="font-family: INSERT FONT NAME HERE">TEXT</span> HERE</h1>

This is what is should look like when done properly:

YOUR TEXT HERE

Make sure you keep spaces between each word so they don’t all mash together and look like one word. You may have noticed that I used ‘span style’ instead of ‘p style’ like I did earlier. ‘span style’ allows for any text style to stay inline together, while ‘p style’ creates separate lines for each different text style. Since my example above uses 2 different text styles that I want to stay together on one line, ‘span’ is what needs to be used in the code.

When you want to add a paragraph or sentence of text using your Heading 4 text style, paste the following code into your code block:

<h4>YOUR TEXT HERE</h4>

All you have to do is add your text in between the h4 tags (aka replace YOUR TEXT HERE with your actual text).

And that’s it!

I hope this tutorial helped you. If you have any questions or requests for more custom codes, let me know below!

 



xox, katelyn

Meet the owner →