Pretty Handwriting Fonts in Squarespace + Tilted Script CSS snippet

Web Design

Dec 6

Are you looking for the perfect handwriting font for your Squarespace website? Look no further! There are tons of gorgeous script fonts available, and we've rounded up the top 12 for you! Each font offers its own unique look that will make your website stand out and draw the eyes of your visitors. From the bold and beautiful Acroterion to the calligraphy-inspired Sloop Script Pro, these fonts offer a variety of styles to choose from. And best of all, they're all available within Squarespace, so you don't have to worry about adding any extra coding. Go ahead and start exploring – you're sure to find the perfect font to make your website shine!

Here’s the list:

Adore You Slanted
Acroterion
Adorn Garland
Adventure
Ballare
Bickham
Gautreaux
MrBlacketon Pro
Nautica
Olicana Smooth
Sloop Script Pro
MrLeopold Pro

adore you slanted squarespace script font

mrblacketon pro squarespace handwritten font

olicana smooth squarespace handwritting font

sloop script pro squarespace handwritting font

mrleopold pro squarespace handwritting font

The golden rule of gorgeous typography: Use handwriting fonts sparingly

Squarespace has many beautiful handwriting fonts in the library, so it’s easier to get carried away! If you liked one of the fonts from our collection, here is a tip: use it sparingly to add little touches and embellishments. Handwriting fonts are often difficult to read and can easily take away from the overall design. However, when used in the right way, they can be a great way to add a personalized touch to your work. For example, you can use handwriting fonts to emphasize important words in a headline or to add an extra sprinkling to a logo.

But remember: less is more when it comes to handwriting fonts. Only use them when it adds something special to your design, and keep the rest of your typography clean and easy to read, as too much handwriting can quickly become overwhelming.

Stick to one font, and use it only for select pieces of text. It's also important to make sure the text size is large enough to be legible. It's also worth considering the context in which you're using the font. If it's being used to convey a message, make sure the font still allows your message to be read clearly. If you follow this rule, you'll end up with the perfect mix of classy and creative.

How to add a tilted accent script font to your website

Here’s how to add a slightly tilted script font to your Squarespace website. Use it as an accent to add embellishments here and there. It’s a great way to spice things up on your website!

Step 1. Let’s add a handwriting font to one of the elements on your website. This method allows us to add font without having to upload a WOFF font file to Squarespace. We can use one of the fonts available in the Squarespace library. If you are using a logo as an image, you can assign handwriting font to the site header title. To do that, go to Design → Fonts → Assign Fonts → Site Title.

Alternatively, you can assign a script font to one of the elements you are not using on the site. For example, there are three types of buttons and each button can have its own font. All we have to do is use a script font somewhere on the site.

Step 2. Add the following CSS snippet and call your handwriting font there. You can look up how the name of the font is spelled in the CSS in the fonts menu. It will look like this:

So, instead of typing “MrBlacketon Pro” - you would type “mrblacketon-pro”.

The snippet below assigns the font to headline 4 (h4) bold. You can use handwriting whenever you type in h4 in bold. You can change the size of the h4 inside Squarespace admin. Tweak the transform property in the snippet below to change the tilt degree.

h4 strong {
  font-family: "nautica";
  font-size: 45px;
  font-weight: 300;
  line-height: 1.2;
  text-transform: none;
  display: block;
  transform: rotate(-5deg) !important;
  margin: auto;
  position: relative;
  font-weight: normal;
  letter-spacing: 0px;
}

We hope this tutorial will help you add a nice script font to your website!

Need help with your website?

Schedule an appointment and we will take care of your website needs. We can accomplish some of the following in a 1.5-hour meeting:

Custom CSS writing
Set up your brand fonts and colors, show you how to crop your graphics and replace the content
Repopulate your entire home page with new content and clean it up with CSS on mobile / or do targeted CSS cleanup of 2-3 pages
Styling shop/blog and uploading up to 5 products/blog post
Set up your forms, and lead magnets, and connect them to an email marketing platform of choice
Custom Squarespace tutorial just for you!