Let’s upload a Custom Font to Your Squarespace 7.1 Website
Ready to give your Squarespace site a little extra flair with a custom font? You've got this! Follow these easy-peasy steps, and you'll have your unique typeface up and running in no time. Let's do this together!
Here’s what I like using a custom font in my Squarespace Website
There some truly wonderful fonts out there
It immediately sets your site apart, and often gives the impression that you truly thought about it, and they’d be right. You did think about it! That translates into a great little burst of trust ;)
Finding a font you are obsessed with can stand in for a brand so you don’t have to pay to have one created (it’s TOTALLY worth having a designer work with you on this, but you might not have the budget so this might be great)
Sounds amazing, right? Let’s dive into it.
Step 1: Get Your Font Files Ready
Gather Your Font Files: First things first, make sure you have your font files ready to go. They should be in .ttf, .otf, or .woff formats.
Stay Organized: Keep those font files in a neat little folder where you can easily find them. Naming them clearly will save you a headache later!
Step 2: Upload Your Font Files to Squarespace
Log In to Squarespace: Head over to Squarespace and log into your account. You've got this!
Click on Pages from your Dashboard on the left of the screen: From your site dashboard, click on
Pages. It's time to get creative!Scroll down to Website Tools: Click on Website Tools
Click on Custom CSS
Click on Custom Files: It will then present you with a box to upload your files
Upload Your Font Files:
Click
Upload Fileand select your font files from your computer. Let them upload fully – watch that progress bar!
Step 3: Add Your Custom CSS
Access the CSS Panel: While you're still in the
Custom CSSsection, it’s time to sprinkle some CSS magic.Define Your Font Face:
Copy and paste the following CSS code into the editor, and replace the placeholder URLs with the actual URLs of your uploaded font files.
To find the URLs, click on each font file in the
Manage Custom Filessection and it will automatically copy into the editor space.
@font-face {
font-family: 'YourFontName';
src: url('URL-to-your-font-file.woff') format('woff'),
url('URL-to-your-font-file.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
To find the URLs, click on each font file in the Manage Custom Files section to copy its URL.
3. Apply the Font to Your Site:
Now, let’s make your site shine with your custom font. Add this CSS code shown below to specify where you want your new font to appear. FYI: h = heading. h1 is heading one, the largest one that will appear on your site. p = paragraph.
h1, h2, h3, h4 {
font-family: 'YourFontName', sans-serif;
}
p {
font-family: 'YourFontName', sans-serif;
}
Step 4: Save and See the Magic
Save Your Changes: After adding your CSS, hit that
Savebutton at the top. You’re almost there!Preview Your Site: Take a look around your site to make sure your font looks fabulous on all the elements you’ve targeted.
Publish Your Site: Once everything looks just right, your custom font is live for the world to see!
Step 5: Troubleshoot Like a Pro (If Needed)
Clear Cache: If the font isn’t showing up, try clearing your browser cache or viewing your site in an incognito window.
Check Your URLs: Double-check those font file URLs to ensure they’re correct and accessible.
Multiple Weights and Styles: If you have different font weights or styles (like bold or italic), define each one with additional
@font-facerules.
