How to Add Custom Fonts to Your Squarespace Website
Are you looking to make your Squarespace website truly unique? Custom fonts can be a game-changer, giving your site a distinctive look and feel.
In this step-by-step guide, I’ll walk you through the process of adding custom fonts to your Squarespace site!
Step 1: Choosing your fonts
Before diving into Squarespace, you’ll need to select the custom font(s) you want to use.
Make sure these fonts are available as web fonts…usually provided by font libraries like Google Fonts, Adobe Fonts, or Font Squirrel.
If you want to go the paid route, I recommend purchasing your font through a site like Creative Market. Don’t worry, this won’t break the bank. Most fonts will run you around $15-$60, and you’ll be buying the rights to the licensed font.
Once you’ve found the perfect font to compliment your brand you’ll download the file. Your font files will likely come in .otf or .ttf file format.
Step 2: uploading custom font to your website
Now that we’ve chosen the right font and downloaded the font files…here comes the FUN part!
Let’s upload the font to your website.
You can upload your new font in these easy-to-follow steps:
Go to the Website section of your site.
Scroll down to Website Tools and click on Custom CSS.
In the Custom CSS editor, click on the drop-down arrow for Custom Files.
This pop-up menu is where you’ll add the font file. Select the font file you downloaded previously.
Nothing happens….
This is normal. We need to add some custom CSS to tell your site you want to use this font and where to apply it.
Step 3: apply custom Font to your Website
This means it’s time to get your code on!
I know it can seem scary, but it’s actually pretty fun. Here we go…
In the Custom CSS editor, you’ll want to copy and paste the following snippet of code:
@font-face {
font-family: 'Name' ;
src: url ('Link');
}
Step 4: Getting your Custom Font to Show up
After pasting the CSS into your Squarespace website, we have a few more steps to get your font up and running. Delete the word ‘Name’ in the code and replace it with your desired font name. You can use the actual font name to make this easier or create a name of your choosing.
Now, delete the word ‘Link’ and replace it with the link to your font file. To do this you’ll highlight the word link, select the drop-down arrow for custom files, and select the correct font file.
Step 5: Using Your Custom Font
Now that you’ve uploaded and defined your custom font in the Custom CSS editor, it’s time to apply it to your Squarespace website…we’re going to tell your site how you want to use this font.
Are you planning on using this font for paragraphs throughout your site, or is this font better suited for headings?
Let’s write a bit more code to get these particular elements working correctly:
Headings and Paragraphs
Use this snippet of code to use the font for headings and paragraphs on your site:
h1, h2, h3 {
font-family: 'Name' !important;
}
Simply copy the code and replace ‘Name’ with the name of your custom font. Want to use the custom font for paragraphs? Replace ‘h1’ in the code with ‘p’.
Site Title
Do you plan to use a site title instead of a company logo? No problem, you can use your custom font and the below code to make your header really stand out.
.has-site-title .Header-branding {
font-family: 'Name' !important;
}
Copy this code and replace ‘Name’ with the name of your custom font.
NOTE: Although Squarespace does an amazing job of transferring your layout to mobile view, sometimes you need to help it along, as you will in this instance. You’ll need to change the mobile view for site titles, and you can do so by using this code:
.Mobile-bar-branding {
font-family: 'Name' !important;
}
Again, replace ‘Name’ with the name of your custom font.
Blog Post Titles
Okay, one more example. Let’s say you want to target only the headings of your blog posts. Copy and paste this code:
h1.blog-title a {
font-family: 'Name' !important;
}
You guessed it….replace ‘Name’ with your custom font.
Step 6: Save and Publish
Don’t forget to save your changes in the Custom CSS editor. Once saved, your custom fonts should be applied to your Squarespace website.
What can we take away from this?
Incorporating custom fonts into your Squarespace website is simpler than you might think, thanks to the power of custom CSS. With a few easy steps, you can elevate your site’s visual appeal and create a truly unique online presence. So go ahead, experiment with fonts, and make your Squarespace site stand out from the crowd. Customization is at your fingertips, and your website is your canvas - start creating today!
If you liked this, you’ll LOVE these:
Look for further support?
Virtually Jenn offers custom Squarespace web design to elevate your online presence and seamlessly integrate SEO strategies, website maintenance, and assistance with copywriting while incorporating keyword research into all pages. We craft unique and visually captivating websites tailored to your brand, ensuring you stand out in the digital world.
