CSS: Adding custom fonts to Squarespace

Add a heading (4).png
 

Being on brand is one of the most important things when building a website. So you can understand wanting to have your own fonts on your website.

The below code will help you add custom H1, H2, H3 and P fonts separately. 

//ADDING H1 CUSTOM FONT//

@font-face {    
font-family: 'FONT NAME';       
src: url('FONT URL');  }
h1 {font-family: 'FONT NAME';}

If you're wanting the same font for H1, H2, H3 then repeat the line below in the last section of the code. 

h1 {font-family: 'FONT NAME';}
h2 {font-family: 'FONT NAME';}
h3 {font-family: 'FONT NAME';}

Adding custom P font.

//ADDING P CUSTOM FONT//

@font-face {    
font-family: 'FONT NAME';       
src: url('FONT URL');  }
p {font-family: 'FONT NAME';}

Fun trick - always name your code with some lovely forward-back slashes. Otherwise you will have the biggest headache trying to figure out what's what!

For all references and tips, please check out the Squarespace Forum here.

SquarespaceKiandra Trickettsquarespace, squarespace design, css, webdevelopmentComment