How To Use Your Own Font in Squarespace

This quick tutorial will show you how to use your own font on your Squarespace website! Please note that I recommend using an OTF font file, which stands for Open Type Font. Rumor has it that most browsers respond best to that type of file.

Anywho, once you have your font file, check out this tutorial on how to install it and use it on your Squarespace website! Code below - enjoy! :)

 
 

After you have uploaded your font file to the Custom Files section of your website, this is the code you need to use to install your font into the CSS.

@font-face {
 font-family: font-name;/name it whatever you want
 src: url(unique-url-for-your-file: click the file in your custom file folder to get this url)
}

After you have that code in place, it’s time to tell Squarespace how you want to use your new font! Use this code to specify what type of text should be using that font. You have five main options, H1, H2, H3. Normal Text, Quote Text, and Quote Source text. Technically there are even more places you can use it, but for the sake of this intro tutorial, we are keeping it to the main types.

Heading One Font

h1 {
 font-family: font-name, alternative-web-safe-font;
}

Heading Two Font

h2 {
 font-family: font-name, alternative-web-safe-font;
}

Heading Three Font

h3 {
 font-family: font-name, alternative-web-safe-font;
}

Normal Font

p {
 font-family: font-name, alternative-web-safe-font;
}

Quote Font

.sqs-block-quote blockquote {
 font-family: font-name, alternative-web-safe-font;
}

Quote Source Font

.sqs-block-quote .source {
 font-family: font-name, alternative-web-safe-font;
}


Where do you get a font file?

The internet has a ton of great places to find unique custom fonts. Sites like CreativeMarket.com have a lot for sale. DaFont.com, FontSquirrel.com, and 1001Fonts.com also have some great options. Just make sure that you have the right licence to use whatever font you download on your website!

READY FOR MORE?

Those codes are just one section of my Squarespace CSS Cheat Sheet, a PDF with over FIFTY pages of copy and paste code that will make your Squarespace site look fabulous.