How to Add Custom Fonts to Your Squarespace Website

Add Custom Fonts Squarespace - Alex Morton Creative

** Note: Some (easy!) coding required in this tutorial!

Let’s say you’ve just found a great font from a Font website, downloaded it into your computer’s font library and are now wanting to find it in the little pull-down menu on Squarespace. Only problem's not there in the pull-down menu!

Well, unfortunately, it doesn’t all work so seamlessly! Downloading new fonts requires you to work a little bit extra to be able to show them off on your beautiful website!

In order to add a custom or downloaded font to your Squarespace website, you’ll have to embed a bit of code. And if you’re a code-averse person, that might sound similar to me suggesting that you’ll need to cut off your arm.

Alas! Fear not, sweet, Squarespace-savvy friend. I’ll make this as painless as possible and help you get that new font onto your Squarespace site sooner than you can say “Arghh! My arm! Not my arm!!!”

To get to where you'll be placing your code, head to your left-side panel and select 'Design,' then 'Edit CSS'

Custom Font Squarespace Alex Morton Creative
Custom Fonts Squarespace Alex Morton Creative
Screen Shot 2018-03-20 at 7.01.38 PM.png

Your code will be as follows:

If you want to change just the Heading 1 font to a great Script font you found that doesn’t necessarily work well (read: looks heinous!) as your normal paragraph text, input this code into your Edit CSS form:

To change just your Heading 1:

   font-family: 'YOUR-FONT-NAME-HERE' !important;

If you want to change all of the font Headings (h1, h2, and h3) to be one font - maybe a more versatile font for example, just go ahead and input:

 h1, h2, h3{
   font-family: 'YOUR-FONT-NAME-HERE' !important;

To change all paragraph text ('Normal' text):

body, p {
   font-family: 'YOUR-FONT-NAME-HERE'  !important;

And to change everything (body paragraph text PLUS all headings):

   font-family: 'YOUR-FONT-NAME-HERE';

Easy peasy! Just remember to put your custom font name where it says YOUR-FONT-NAME-HERE in between the apostrophes. If more than one word, put hyphens between the words!.

Example: If I'm changing all of the fonts on my website to a font called "Cool Leaf Love," my code would look like this:

*{ font-family: 'COOL-LEAF-LOVE'; }  

Another example from my own site:

Screen Shot 2018-03-20 at 7.01.38 PM.png

Stay cool, stay creative - 

Asset 1-8.png

Related Reading: