Just getting started with Squarespace CSS? Awesome! I want to teach you the basics grab my free Getting Started Guide here https://insidethesquare.co/learn

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! Codes below enjoy! :)


Once 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:

@fontface {
fontfamily: 'fontname';
src: url(uniqueurlforyourfile: 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 {
fontfamily: 'fontname', alternativewebsafefont;
}

//Heading Two Font//
h2 {
fontfamily: 'fontname', alternativewebsafefont;
}

//Heading Three Font//
h3 {
fontfamily: 'fontname', alternativewebsafefont;
}

//Normal Font//
p {
fontfamily: 'fontname', alternativewebsafefont;
}

//Quote Font//
.sqsblockquote blockquote {
fontfamily: 'fontname', alternativewebsafefont;
}

//Quote Source Font*//
.sqsblockquote .source {
fontfamily: 'fontname', alternativewebsafefont;
}

▸▸▸ Ready for more codes?
The codes in this tutorial are just the beginning of all the cool things you can do with Custom CSS! When you're ready to dive in and start customizing, you can use codes from my CSS Cheat Sheet. It has over 30 pages of code snippets and pro tips to help you get started. Download your copy at https://InsideTheSquare.co/css

Need some help? Visit https://insidethesquare.co/codehelp to see my current support options.

The term "Squarespace" is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace, Inc. I just really love their platform ♥

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks #squarespacetips