Pre-S. Just joining us for the Intro to Squarespace CSS series? Welcome! I’ve done a couple other posts on the topic, so it may be worth circling back around to those as well before diving into this one!

Suggested reading: Squarespace CSS: what you need to know before you get started, annnnd Squarespace CSS: how to target specific pages, sections, or blocks on your site.

Okie dokes, so remember in Squarespace CSS: what you need to know before you get started, we chatted about the 3 specific ways that custom CSS could be added to your Squarespace site?

And how each one served a slightlyyy different but important purpose than the other?

It’s time to put all that new-found CSS nerdery to good use!

I’m doing a round-up of the handiest CSS tutorials out there for styling your fonts & text blocks, as well as which method of CSS code injection they use!

Now, if you’ve joined me in my Square Secrets course you know I’m all about learning to master Squarespace and customize your site without having to learn to code, but I also totally get that sometimes we’re just really dying for a small tweak here or there that requires CSS.

So while I don’t recommend going too too crazy with code (I share why in Squarespace CSS: what you need to know before you get started) it can be pretty fun to push those Squarespace design boundaries from time to time!

Top CSS tips for customizing Fonts & text in Squarespace

1. How to add a low highlight to text in Squarespace using CSS

Method of CSS injection used: Universal & inline

This little gem comes to us courtesy of the talented lady behind Thirty Eight Visuals (who, btw is an absolute killer resource for all things custom CSS!)

This tutorial allows you to add a partial, or off-center highlight to your text, whether it’s just one word you want to stand out, or a whole sentence or title!

She also covers a few other handy but related tricks in this tutorial, including:

  • How to add a low highlight to your entire heading using CSS

  • How to add a low highlight to links using CSS

Here’s a quick peek at what a “low” or off-center highlight effect looks like, so ya know!



2. How to add custom bullet points or images to a list in Squarespace using CSS

Method of CSS injection used: Universal

Bored outta your noodle with your current bullet point options? No worries!

It takes all of 10 seconds to add super fancy bullet points to one or multiple text blocks on your Squarespace site, and the folks over at Bold & Pop are here to help you make it happen! Here’s a link to that tutorial.

And here’s a quick little test I did (and would you lookie there! It works! ):



3. How to add a gradient to your text in Squarespace using CSS

Method of CSS injection used: Universal & Inline

Ok, tested this one and all I can say is…

Holy. fun.

I could see myself spending a whole day messing around with the pretty colors! Def something very therapeutic about adding this particular snippet of CSS (and HTML, because it does use a bit of that too!).

Here’s a quick example of what can be achieved using this nifty little CSS tutorial from Fossheim.io.



4. How to add a background image to your text in Squarespace using CSS

Method of CSS injection used: Universal & Inline

This tutorial lives over on 1stwebdesigner.com and the possibilities are honestly endless!

(So CSS’ers get stoked!)

Wondering what this bit of custom code does? Here’s some text with a photo of yours truly floating behind it!





5. How to add a highlight effect to your links on hover in Squarespace using CSS

Method of CSS injection used: Universal

Want some extra special, eye-catching magic to happen when someone hovers over a link in a text block?

Big Cat Creative has got you covered!

In this tutorial, Erica is giving you all the HTML, CSS, and step-by-step instructions you need to get that your link(s) to change when a visitor hovers their cursor over it!

Here’s a sneak peek at what that could look like on your site or blog!



6. How to add a custom font in Squarespace using CSS

Method of CSS injection used: Universal

Got your eye on a font that isn’t native to Squarespace? You’re in luck!

The lovely Kali over at June Mango, has put together this super helpful post to get those fancy fonts up and running on your site!

Follow the steps she lays out, and you’ll be typing in your dreamy custom fonts in no time!



7. How to add extra heading types (h4 & h5) in Squarespace 7.0 using CSS

Method of CSS injection used: Universal & inline

Okie dokes, so this next tutorial comes from CSS guru & past Square Secrets & Square Secrets Business course student, Rebecca of Rebecca Grace Designs!

So what problem is she helping us solve with her CSS wizardry?

The age-old Squarespace headings dilemma: you only get three different heading types to customize to your liking and use throughout your site.

Squarespace did that on purpose btw, because they know that having too many different things going on can be superrrrr distracting for users, and ultimately, that can have a toll on conversion (a.k.a how easy it is for your visitors to find and take whatever next steps you are hoping they will!)

But, sometimes 3 just isn’t enough!

So if you’re ready to mix it up with a few extra font choices, just follow the simple steps in this post.



8. How to add different font types headings in Squarespace 7.1 using CSS

Method of CSS injection used: Universal

Ok, so you’re going to have to bear with me a minute as I brag on another lovely past student of my Square Secrets & Square Secrets Business courses!

We have Faria of Creations by Faria to thank for this next handy tutorial!

If you’ve ever wondered how the heck you are supposed to customize your heading font types in the new version of Squarespace (because it is a touch different than 7.0!) Faria is making all your font styling dreams come true over here.



9. How to create vertical text in Squarespace using CSS

Method of CSS injection used: Universal

This brilliant and ridiculously simple video tutorial comes to us courtesy of Becca over at Inside The Square (another lady absolutely killing it in the CSS/coding space!)

I was especially excited to see her give a quick little 101 on why certain lines of CSS were included in this little code snippet, not just a quick “here’s your code and where to stick it”!

Copy and paste tutorials are no doubt super duper handy, and a legit gift from the internet gods when you don’t have time to go out and learn code (which is basically like learning a new language).

But anytime you can experience a lightbulb moment and actually learn something you can later implement in other scenarios is a major win in my books!

So def tune in to this one to see how she is able to make this nifty bit of CSS serve your site well in both desktop and mobile using what’s called a media query!

And then take what you learn and apply it to other areas of your site you’ve customized with code!

Here’s an uber-basic example of vertical text in Squarespace using CSS:



10. How to create separate columns within one text block in Squarespace using CSS

Method of CSS injection used: Universal

While it’s definitely possible to create “columns” of text simply by dragging and dropping text blocks side-by-side, sometimes you want just a little more control over how those columns are going to look!

Enter: another magical CSS how-to from the coding genius, Thirty Eight Visuals!

I’m pretty sure you need zero help from me imagining what two columns of text look like…but here’s an example just in case!




/

You’ll also love . . .

Squarespace CSS: 10 tips for customizing your site’s fonts & text blocks