How to Customize Your Squarespace Site
September 14, 2023
Category: Web Design
how to customize your squarespace site
It’s 2023. You need a website for your business and that website should reflect your branding to a T.
I’m going to start off by saying I definitely don’t recommend DIYing your website (more on that here!), but if you have to…then I first and foremost recommend using a website platform such as Squarespace. The one caveat here is if you’re an e-commerce business. While Squarespace does have some e-commerce capabilities I definitely lean toward Shopify for product-based businesses; UNLESS you’re only selling digital products likeeee Instagram templates for example.
So, why do I recommend Squarespace? Honestly, it’s the easiest platform to get a professional-looking website without hiring a developer to hardcode your site from scratch. Now, notice I said developer, not designer. You’d still benefit from a website designer to help you turn your branding elements into a website reality, think through the best user experience for your audience, design, and layout with conversions in mind, and let’s not forget about adapting across alllllll screen sizes. I could keep going but the bottom line is: you don’t need to know how to code to create your website! There are a few small tweaks like adding custom fonts through code (which we’re sharing how-to below!) but beyond that, you can get by without knowing a single thing about HTML/CSS. Following here?
Overall, Squarespace has a super user-friendly interface that easily and intuitively allows you to update text and images over time. You’re also able to add custom fonts and style settings fairly easily — more on that later! Squarespace allows you to blog, sell products online, and give more information about your services — everything a service-based business owner could need!
Now if you’re thinking, well what about Wordpress and Showit? I share more about why those aren’t my preferred sites here! It essentially comes down to having a faster platform and generally not looking as professional.
Alright, alright. I’ve sold you on Squarespace. Now let’s talk about a few things you can tackle on your own IF you can’t hire a website designer right now.
how to add custom, branded fonts to Squarespace
First things first, you’ll need to buy the web licenses for all of your branded fonts (these files will end in .WOFF or .WOFF2). I’d also recommend purchasing desktop licenses at this point too as you’ll likely need those in the future as well (files that end in .OTF or .TTF)! If you go through the branding process with Brighten Made, we make this SUPER easy for you by including all of the font names, weights, and links to purchase within your brand guidelines doc. We also provide the type hierarchy aka which font should be used for your heading one, heading two, body copy, etc.
Once you’re in your Squarespace site you’ll select ‘Website’.
From there, you’ll need to scroll down under the section header labeled ‘Utilities’ where you’ll see ‘Website Tools’ — select that!
Once you’re in your website tools section you’ll click ‘Custom CSS’.
From there in the CSS window you’ll need to click on the ‘Custom Files’ with the down arrow — I’m going to be honest when I say this part isn’t super intuitive and doesn’t totally look clickable in my opinion!
After you open up the custom files window you’ll be prompted to add images or fonts. This is where you’ll upload your WOFF file so that it generates the font URL for you. (What this means is now your font is hosted on Squarespace!)
Now that you have all of your font files uploaded, you’ll need to copy and paste the following code into the Custom CSS area.
@font-face {
font-family: ‘YOURFONTNAME’;
src: url(‘https://static.insertyoururlhere.woff’) format (‘woff’);
}
Where it says YOURFONTNAME, replace it with the name of your font. Don’t forget the exact naming/spelling you use here as you’ll need to reference it again. Once you’ve named your font, you’ll need to add your font URL between the two parentheses. To insert this link, you’ll simply click between the two parenthesis and it’ll pull up your list of fonts you’ve already uploaded. Repeat the process as needed until all of your fonts are uploaded! You can also upload both ‘woff’ and ‘woff2’ files if you have them, as certain browsers may only render one version of the web file.
It should look something like the image on the left when you’re done!
How to Apply your custom font to your squarespace site
Now that your fonts are uploaded, you can choose which headings or paragraphs you want to apply your font to. Again, if you’ve gone through the branding process this is all outlined for you on the typography overview page of your guidelines!
Follow your guide to copy and paste the appropriate CSS snippets with your font names (remember I said those were important and you’d need them again later, now it’s later!). You’ll continue to paste these code snippets within that Custom CSS window.
h1 {
font-family: 'YOURFONT';
}
h2 {
font-family: 'YOURFONT';
}
p{
font-family: 'YOURFONT';
}
‘P’ stands for body copy. H1 stands for heading one, H2 stands for heading two, so on and so forth!
Another example taken directly from the Brighten Made site:
Now you can further customize the style of your fonts within this Custom CSS window as well. In Squarespace, if you update specifics such as font size, weight, letter spacing within the general font settings it’ll apply those specific rules to allllll of your headings and paragraphs so you’ll need to tap into this Custom CSS again if you want to target single heading styles on their own. For example, in your brand guidelines we’ll include recommended letter spacing for each font and type hierarchy which you’ll want to implement or the results won’t be what you’ve come to expect of your branding!
Here’s a code snippet as an example!
h3 {
font-family: ‘yourfontname’;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: lowercase;
}
why you should hire a website designer anyway
I mean this all comes down to personal preference and budget in a way, but the reality is if you’re not comfortable with using a little bit of CSS then you’re truly better off hiring a website designer. Additionally, we’re doing SOOOOO much more than just adding your brand fonts and color palette. We’re creating an interactive and engaging website that’s thoughtfully designed with your target audience in mind. When we design a website we’re specifically thinking about conversions and the user's journey so we optimize the design for that. As designers, we also have a solid understanding of type and image layouts to create the best user experience and a professional-looking site. We’re also designing with various screen sizes in mind which is going to be key for your audience as well!
All in all, it can be challenging for someone without a designer lens to look at all of your amazing branding assets and visualize how those can come together to create a site that’s more unique than just a few color blocks and scrolling text. When you hire a web designer you’re getting a VALUE out of that. One that will give you a return on your investment tenfold.
Why we do branding first, then a website design
So maybe you’ve decided that it’s totally worth it to invest in a custom Squarespace design with us! I promise it’s a decision you won’t regret but first, unless you’re a past client, we’ll want to nail down your branding. In fact, we actually don’t offer just web design unless you’ve already gone through the branding process first and here’s why.
Your branding sets the whole tone for literally everything to follow whether that be a website or packaging. If we design a website without having you first go through the branding process I can promise you that the result will not be what you want. The site might end up looking choppy and not feeling cohesive. PLUS, we take a VERY strategic approach to our branding projects which includes getting to know your business goals, your target audience, an overview of your competitors. All of this strategic work (more on that here!) we do in the branding process helps inform your website design to better convert leads into customers.
Squarespace Website Design and Development
Interested in looking at some of our past Squarespace website designs? Take a look at a few of our favorite projects below!
lucie fink — one of the OG digital content creators sharing her wealth of knowledge via courses, personalized coaching, consulting, and more!
mayday — a playful, modern coffee shop selling curated goods, fresh florals, and tasty treats.
bash co. — a modern, bold event design and production company.
paloma — a New Jersey-based hair salon serving up all the best vibes.
wildkind — a tropical, Hawaii-based cafe and online wellness community inspiring positivity.
Ready to take the leap and start building your brand presence online? Reach out! We’d love to help you with our Squarespace website design services.
Plus, check out all of our branding and website design services to see if there’s something else you might want to add to your website design package — think website copywriting, an email template, and more!
