Add a Custom Font

What does it do?

These code snippets will allow you to upload a custom font and apply it to various areas of your website.

To add a custom font to just one word or phrase in a sentence, check out this code snippet here.

Upload a Custom Font

1. Click on Manage Custom Files in Design > Custom CSS

2. Upload the font file.

Code Snippet

Copy and paste this code into Design > Custom CSS

/*Import Custom Font */
@font-face {
 font-family: 'NAME'; 
 src: url(LINK);
}

Then delete the word LINK and place your cursor between the brackets. Click on the font file you uploaded to insert its url into the brackets. Then name the font whatever you would like. Just be sure to use the same exact name in the next step.

Copy and paste this code into Design > Custom CSS

Squarespace 7.0

Choose from the following to apply the font to the desired areas of your site.

/*Add to Site Title*/
.has-site-title .Header-branding {
  font-family: 'NAME' !important;
}

/*Add to Mobile Branding*/
.Mobile-bar-branding {
  font-family: 'NAME' !important;
}

/*Add to Headings or Body Text*/
h1 {
  font-family: 'NAME' !important;
}

Squarespace 7.1

Choose from the following to apply the font to the desired areas of your site.

/*Add to Site Title*/
#site-title {
  font-family: 'NAME' !important;
}

/*Add to Headings or Body Text*/
h1 {
  font-family: 'NAME' !important;
}

Then change NAME to the name of the font you added in the previous step.

How To Use It

1. Upload your Custom Font

2. Copy and paste the code as indicated above.

3. If you decided to add the font to headings or body text, change the h1 to match your selection.

   1. h1 = Heading 1

   2. h2 = Heading 2

   3. h3 = Heading 3

   4. p = Body Text (all paragraphs; there is no p1, p2, p3 etc.)

   5. a = Link