How to customize Squarespace blog title font
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
A blog post title in Squarespace is designed to match your Heading 1 font style assigned in your font menu, but with a little custom CSS, we can make it anything you want it to be!
In the tutorial video below, you’ll learn what specific codes you can use to change the color, font weight (boldness), font size, and even the font family for your blog post title.
The codes used in this tutorial are below, but make sure to watch this step-by-step tutorial closely, so you understand how to use them!
Video tutorial
Code Example
/* Change the blog post title size */
.entry-title {font-size:25px!important}
/* Change the blog post title color */
.entry-title {color:#50bdb8!important}
/* Change the blog post title weight */
/*Keep in mind that you’re limited by the weights available for the font you installed.*/
.entry-title {font-weight:lighter!important}
/* Change the blog post title font family.*/
/*Keep in mind that you can only use a font family that you are already using on your site; assigning it in your site styles menu or adding it with custom CSS.*/
.entry-title {font-family:Lobster!important}Why is everything !important?
We are overwriting what you’ve assigned to that specific text type in your Site Styles menu, so we need to say !important at the end of every value to make sure that the browser program knows to use our code.
What about the blog title on the blog post list page?
Replace .entry-title with .blog-title
What about the blog post title in a summary block?
Replace .entry-title with .summary-title but keep in mind that this will work for ANY title in a summary block, and not just a blog post.
How do I do this to ONE blog post, and not all of them?
On the individual blog post, click the blue plus sign, add a code block, and paste your custom CSS between style brackets like this: <style> your code </style>
Where can I find a list of all the selectors I can use to customize Squarespace?
Inside my digital database - the Squarespace CSS Cheat Sheet! Get lifetime access at insidethesquare.co/css
How can I say thank you for this tutorial?
You can donate to support my work at BuyMeACoffee.com/insidethesquare
Here are links to a few other tutorials you can check out to customize your Squarespace blog even more:
Brand new to CSS? Start with my free course here: insidethesquare.co/learn
How to add a background image to a blog post in Squarespace 7.1
