Top Tips to Make the Most of Script Fonts on Your Squarespace Website
Your website is the first opportunity you have to make a great impression on future clients. The perfect first impression is all about perception — you want to ensure that prospective clients fall in love with your website as soon as possible.
The design of your site is the perfect opportunity to do this. And script fonts can be the perfect touch to help your website stand out and help your audience understand what kind of brand you are.
But there are so many options out there — how can you know which is best for your business?
We have a few tricks up our sleeves to help you choose and use the perfect script font, and we’re going to share it all in this blog post.
How to Pick the Perfect Font
Maybe you're thinking that it's just one font, and you'll only be using it here and there – so what's the big deal? The thing is, all the little details on your website add up! Everything your audience observes (and likes!) adds to the green flags that eventually convince them that you're the right person to invest in.
There are three main boxes you want to check as you're browsing through font choices to ensure you're making the best decision possible.
Let's dissect the example of a script font added to our template, Awaken (you can view the live demo here), and see how these three elements helped us add the perfect bit of script font to our website.
No. 1: Font Sizing
A script font is like the garnish on your favorite pasta dish — it's aesthetically pleasing and tasteful. Instead of being overdone, it's just the right ingredient that complements the rest of the dish. Too big or too much garnishing is going to overpower and detract from the main course, and the same can be said about a script font that is too large or used too often.
Generally, the larger the text, the easier it will be to read. Small script fonts will have your website visitors squinting and struggling to understand what you've written. Most of the time, you'll have to increase your standard font sizes for script fonts. Try to pay attention to the size that works best on your site, then use that same font size wherever you're using the script font on your website.
You'll see that in the image above, we chose a font size that is large enough to be easily legible, capture your attention momentarily, but not overpower the main focus of the section.
No. 2: Legibility
Going hand in hand with font sizing is legibility, or the ability to easily read the fonts you choose to use. Not only does your font size contribute to whether or not it's easy to read, but your font choice can also contribute to either a tasteful or confusing experience for website visitors. Take a look at the graphic below and see if you can identify two reasons why the font choice isn't the best for legibility...
Psst! The font used above is "Maldina Script" in Canva.
Why is this a bad script font choice?
First of all, the sentence is too long. The more words you write in a cursive font, the harder it will be to read. Words start to blend together and it's not as visually appealing as a simple phrase written in a tasteful script font. This can also be true when you choose a cursive handwritten font. It can start to look a little messy, and that can quickly detract from the professional impression you want to convey on your website.
Secondly, the letter spacing is cramped. The lack of space between words makes them look stuck together and it's harder to identify where one word ends and the next begins. This can sometimes happen with individual letters as well. Some cursive fonts overlap letters a little too much, which can also make it more difficult to read.
Legibility is also extremely important to consider for the accessibility of your site. Those who are visually impaired and trying to understand the content of your site may struggle to read longer sentences, phrases, or paragraphs written in a decorative font.
Psst! The font used above is "Alex Brush" and is available in Squarespace.
Why is this a good script font choice?
The sentence is short. Script fonts are best used as an accent, so for a phrase that only has a few words. On the other hand, paragraph fonts should be an easy-to-read sans-serif or serif font.
The letter and word spacing is just right. A clear distinction between words helps to give the eyes of the reader a break and understand each word you have written without as much effort.
No. 3: Cohesiveness
The right font will align with the characteristics of your brand identity. For example, if you want your brand presence to feel professional and elevated, it may be best to avoid brushed and handwritten fonts since these can give off a more playful and casual vibe.
You'll notice that our website template uses bright colors that give off a more cheerful and inviting feel, so to maintain the same brand characteristics, we've chosen a font that has a bit of a playful tone as well. This font is called "Rosseville" and you can download it for free by clicking here. Other script fonts that we love, like Great Vibes (available here on Adobe Fonts), give off a more elegant, luxurious vibe that wouldn't align with the approachability we convey through the rest of our brand identity choices.
Adding Script Fonts to Your Squarespace Website
There are two different ways you can go about adding a decorative font to your website. Squarespace has a large font library with a variety of script fonts you can choose from. To choose from these fonts, select the paintbrush icon in the top right of the backend of your Squarespace website. In the site styles menu that opens, select "Fonts".
If you want to change all headings, paragraph text, or buttons to a script font, you can select one of those options in the "Global Text Styles" menu options. We definitely don't recommend this since it's best to use script fonts in small doses.
However, if you want to assign a custom style to only a certain kind of text, click on "Assign Styles" at the very bottom of the fonts menu. From here you can browse through the various font styles assigned to different elements throughout your website. Let's see how we can do this with one example:
In the list of options, you'll see "Quote Block". A great use of a script font on your website would be in the quote source – such as the name of a person who gave you a nice testimonial. Click on the "Source" option, also highlighted in the image below.
In the menu that pops up, click where it says "Style", then choose the very last option, "Custom", from the list that pops up. A new menu will open with various font customization options. To change the font, you'll want to click on "Family" as seen in the image below.
Click on "Browse all fonts" and either scroll through the list of options or save time by searching for a specific font name. Once you've found the perfect font, click on it and it will be applied to your design! To help your search, here's a list of our favorite Squarespace script fonts:
Alex Brush
Sacramento
Mina
Great Vibes
MissRobertson Pro
Meddon
After choosing your font, you may need to fine-tune it a bit to make it look perfect. You may want to adjust the text size and the "Text Transform" setting so that each word is capitalized instead of the entire thing being in uppercase, which is the standard formatting for quote source blocks in Squarespace. After adjusting everything, your quote block can look something like this:
Psst! The font used here is Alex Brush, available on any Squarespace website!
How To Turn a Few Words Into a Script Font
My favorite way to use a script font is with just one line of text or a few words on one line. Here’s what to do:
Open the custom CSS panel on the backend of your website by clicking:
WEBSITE
Scroll to the bottom under UTILITIES and click WEBSITE TOOLS
Click CUSTOM CSS and paste the following code:
h3 strong {
font-family: 'Alex Brush';
font-size: 40px;
font-weight: 300;
font-weight: normal;
letter-spacing: 0px;
}
Now just make sure you have set the Quote Block Source font (as in example above) to whatever script font you’d like to use and make sure the font name matches in the code above. This step is necessary to “activate” the font on your website.
Whenever you want to use the script font in a line of text on your site, just use the H3 font and highlight in bold. It will automatically become the script font. You can also adjust the code to H1, H2, etc. accordingly.
Now adjust the font size, font weight, and letter spacing in the CSS code above until you achieve the look you want.
Be sure to save the CSS before you exit.
When you’re finished, you’ll achieve the following look:
Using Custom Fonts
Alternatively, you can purchase a custom font! A custom font is typically created around specific attributes to give off a particular look and feel. These fonts are also more exclusive, so instead of having the same or similar fonts as everyone else, you can stand out and catch the eye of website visitors!
Our favorite place to purchase fonts is Creative Market. This is an online marketplace full of design goods. Some of our favorite Creative Market script fonts are...
California Palms - for an easy-to-read, handwritten option
Baxter - an elegant, vintage-inspired option
Layla Brielle - a loopy, calligraphy font option
Northwell - a brushed, rustic option
Adding a custom font to your Squarespace website requires a little bit of extra work. Follow these steps to do so:
Make sure you have your font ready and easily accessible in either a .ttf or .otf file type
Log in to your Squarespace account and open up your website editor. Click on the "Website" tab, then scroll all the way to the bottom and click "Website Tools" under the "Utilities" options, then choose "Custom CSS"
Click on "Custom Files", then click the "+" icon and select your font file from your computer
4. Now you'll have to add in a little snippet of custom CSS (a kind of code that helps you edit the design of your website beyond the typical Squarespace functions). Paste in the following snippet:
// CUSTOM FONT
@font-face {
font-family: 'script';
src: url('paste-url-to-your-font-file.ttf')
}
5. Replace 'script' with your font name and then delete the 'paste-url-to-your-font-file.ttf'. Make sure your cursor is still in between the two parentheses, then go back up to the "Custom Files" dropdown and click on your script font. This will automatically paste a URL into your code
Now you'll want to apply your script font to a specific text style (such as H1, H2, H3, H4, p1, p2, or p3). To do this, paste in the following code snippet:
h4 {
font-family: 'script';}
6. Delete the text that says 'script' and instead put in your font name, the same way you replaced 'script' in the first code snippet. Where you see 'h4' you can add whatever text styling you want to turn into your script font
7. Save your code and test everything to make sure it's working correctly!
Squarespace Templates That Take Your Website to the Next Level
Script fonts are a great way to convey your brand personality through your web design! It can seem a little overwhelming to find the perfect font and make sure it looks just right on your website, but it's worth the effort when it helps you stand out from competitors.
Our Squarespace templates are designed to help you stand out and minimize all the decision fatigue that comes from designing your own website from scratch.
Browse our templates and start imagining all the fun ways you can use one to showcase your brand personality!
You might also like…
