As a Squarespace web designer, I’m always looking for ways that I can help my clients stand out online and create one of a kind Squarespace websites.
Sometimes the font options available on Squarespace don’t quite fit the style guide for your brand, in which case you may want to upload your own fonts. I’ve previously done an in-depth tutorial on how you can add a custom font to your Squarespace website.
In this post I will teach you how you can take this one step further and add a custom font to your Squarespace cover page.
Ready? Let’s dive in!
Step 1: Add your custom font to Squarespace
Adding your own font to the Squarespace cover page is a little more complicated than just setting up custom fonts for your website. Because of this, I strongly recommend that you set up the custom fonts for your entire website first, that way you don’t run into problems later.
To add custom fonts to your Squarespace website, you can follow this tutorial.
We’ll be using a lot of the information from the CSS code area to set up the custom cover page font, so make sure you keep it handy.
Step 2: Get started with the Coming Soon Page
If your coming soon page isn’t set up yet, now would be a great time to do so!
Using the Cover Page function of Squarespace, pick a layout that you like.
Once the Cover Page is set up, click the gear icon, then head over to advanced.
Step 3: Insert the Code
In the page header code injection box, insert the following code:
<style>
@font-face
{
font-family: ‘Font Name Here‘;
src:url(https://static1.squarespace.com/static/XXX)
}
[data-slice-type=”heading”]:not([data-compound-type]) h1{
font-family: “Font Name Here” !important;
line-height: 2.0 !important;
}
</style>
The Font Name Here portion should match the Font name that you have in your CSS box from the previous tutorial.
Similarly, the https://static1.squareespace.com url should match the source URL that you have in your CSS box.
Use the line height setting to change how close (or far) apart the lines on your cover page are. Feel free to add other settings to your code like font-weight, color, or font-size if needed.
Alright y’all! That wasn’t so bad, was it?
In this post I walked you through the simple process of adding a custom font to your Squarespace cover page.
If you’d rather get help from a professional Squarespace designer, you’re in luck. As a Squarespace and Showit web designer, I’d love to work with you to bring your website dreams to life. And don’t worry, I can totally add custom fonts for you too!
Head on over to the services page to learn more about what I do and how we can work together! I can’t wait to build you a website you love.
* this is an affiliate link, which means I may get some benefit at no extra cost to you!
you may also like
