Adding a Custom Font into Your Squarespace Website
You have your brand colors, images, and copy uploaded into your new website, but something is missing that is throwing it off. Your brand font is the final piece you need to tie your new website together, but after hours of googling and screwing with your Custom CSS you’re on the verge of a mental breakdown. No stress - I have your back! Let me walk you through this super simple step by step process of adding your own font into your Squarespace Website.
Step One - Grab you Font Files (WOFF and WOFF2)
To start make sure you have downloaded your font files (.woff and .woff2) from a trusted source. If you purchased them you are going to want to make sure they are licensed for web use.
Step Two - Head to Your Custom Code
From your Squarespace dashboard you will want to MANEUVER to your CUSTOM CODE PAGE.
To get there from your Squarespace dashboard select
→ PAGES (under Website)
→ then Scroll down and click CUSTOM CODE
→ from here select CUSTOM CSS.
Step Three - Upload your Font Files
Inside the Custom CSS panel you will see the custom files tab right under OPEN IN A NEW WINDOW.
Select the drop down next to Custom Files and select add Images or Fonts.
It will then pop open a window for you to select your file. Upload both your WOFF and WOFF2 files into squarespace.
Step Four - Input your Custom CSS
Copy the following code code and paste it directly in the Custom CSS Panel. Your panel will most likely be blank unless you have added other CSS:
@font-face {
font-family: 'NAME';
src: url('fontfilegoeshere.woff2') format('woff2'),
url('fontfilegoeshere.woff') format('woff');
}
Step Five - Replace File Name & Links
First replace NAME (in blue next to font-family) with the name of your font.
Secondly delete the filler font file content and place your cursor between the two quotation marks. Then select Custom Files and select the font file you want to place in between those quotation marks (it will autofill the file for you.
Repeat for both files (WOFF & WOFF2).
Step Six - Apply your Font Styling
For our final step you’re going to specify where you want your custom font to be applied. You can dictate which headings, paragraphs, etc it is used for.
H1 is Heading one - H2 is Heading TWO - H3 is Heading THREE - H4 is Heading FOUR - P is for Paragraph
For this example i am going to say i want H3 to use my custom font. The code to add to your css would be as follows:
H3{
font-family: ‘FontName’;
}
Don’t forget to replace FontName with the name of your font. The font in my video above was Luminaire so my CSS would look like this:
H3{
font-family: ‘Luminaire’;
}
And that’s it! Now enjoy your stunning font in your beautiful Squarespace website!
If you need any help please don’t hesitate to reach out. Or if you’re looking to kick off a branding, website, or marketing project I am always happy to chat further about your goals!
