How to Add a Custom Font in Squarespace
Have you ever seen a website you love and they are using some kind of beautiful unique font that you can’t find on Squarespace itself? I know I struggled with that when I was first learning how to build a website, and it was super frustrating to not know how to achieve the look I wanted. If you’ve ever wondered how you can add your very own custom font on your website, I’m going to walk you through step-by-step so you can really stand out and make your site unique to you!
Best part about these codes is they will work for both Squarespace 7.0 AND 7.1!
Check out these examples below—gorgeous restyled websites template kits from our template shop—to show you how a custom font can completely personalize your website:
Beautifully restyled websites from our website template shop!
Excited yet? Here are the steps you will need to take:
PART 1: First, you will need to add a custom font file to your website. Here’s how:
Download the custom font file that you want to add to your website (this is a file with an extension of .ttf or .otf)
In your main Squarespace menu, click DESIGN -> CUSTOM CSS (at the bottom)
Below the CSS editor, click MANAGE CUSTOM FILES
Here, you will upload your newly downloaded font file
Copy and paste the following code into the CSS editor:
@font-face {font-family: 'FONT NAME'; src: url('FONT URL');}
Now to customize it! Change the text that says FONT NAME to the name of your custom font.
Highlight the text that says FONT URL.
Then click MANAGE CUSTOM FILES and click on the font you just uploaded in the previous steps. FONT URL should now be replaced with an actual Squarespace URL.
If you want to add another font, you’ll need to repeat this process for all of your custom fonts.
Before you move forward, I’d recommend FIRST making a test page on your website and write out sample text for each of your header fonts. That way, you will know exactly which fonts are being changed once you insert the below codes.
PART 2: Once you have all of your fonts uploaded and added to the CSS code, it's time to have them override your default Squarespace fonts.
Now to change your site’s fonts, copy and paste the code(s) below into the CSS editor, depending on what element you want to change:
/*to change heading 1 font*/
h1{ font-family: 'FONT NAME' !important;}/*to change heading 2 font*/
h2{font-family: 'FONT NAME' !important;}/*to change heading 3 font*/
h3{font-family: 'FONT NAME' !important;}/*to change heading 4 font*/
h4{font-family: 'FONT NAME' !important;}
For more advanced customization, let’s say you have a sentence that is in Heading 1 font but you just want to change one word into your custom script font for emphasis. You can create this effect by italicizing that word within the text block.
You can then use the code below which tells Squarespace that within a text block using Heading 1 font (or replace with h2 or h3 or h4, whatever your preference), change the italicized word(s) to script font:
/* Change italicized words in Heading 1 into script font */
h1 em {font-family: 'NAME OF YOUR SCRIPT FONT HERE' !important;}
Keep in mind that you can always adjust the settings of each font in the regular style editor if you want to make more adjustments (things like font size, font weight, letter spacing, etc.
Important last step! Make sure to click SAVE at the top of the Custom CSS page. Here’s an example of how your final code should look at the end (if you only changed h1, let’s say):
And there you go! Now you can enjoy your beautiful new custom fonts and a more unique website :).
NEED MORE SUPPORT to BUILD YOUR DREAM BRAND?
Why start from scratch when you don’t have to? Get started with one of our stunning DIY Squarespace website templates!
Looking for some creative font ideas? Check out my other posts!