How To Combine Multiple Fonts On One Line In Squarespace
Combining fonts on one line for a neat effect on astrologerpsychologer.com
Usually it's not a good idea to combine multiple fonts, or multiple font sizes, on one line. It tends to look tacky. But there are exceptions. When you want some boundary-bursting flair to represent someone who has flair in abundance, consider your font options. With the right ones, you can break the mold.
A Cursive Flair For A Certain Font Pair
Scriptina is a font by Apostrophic Labs that breaks out all over. Decidedly feminine, it resists all constraint. It's the perfect font to scale up and reach out to other elements on the page.
For the adventurous, Scriptina is a perfect font to combine with a more buttoned-up one like Gill Sans. It dances flamboyantly, yet elegantly, with its standing-still partner.
Note how, on Astrologer Psychologer, the "Y" of "Alyssa" swoops down to flirt with the quote beneath, enacting its meaning ("flirting with the zodiac"). And the "L" reaches up to the stars, or at least to the navigation above it.
So on the same line, we need to change font color. For the same bit of text, we want to change font size. And to top it off, we need to change the font itself. But how can we do this?
How To Change Font Color, Font Size, And Font
The aim is to create contrast. There will be contrast in all three main text attributes: font color, font size, and font.
Here's what we put in the Squarespace Markdown Block:
<h1 style="text-align: center" >Astrological Consultations By<span style="color:hsl(322, 100%, 50%); font-family: Scriptina; font-size: 80px">Alyssa</span></h1>
It's just HTML. It could easily go in a Code Block, too. But now that Squarespace bumps you up to a Business Plan for using code blocks, we may as well get the same function from the Markdown Block.
Everything is enclosed within H1 tags, since we wouldn't want to perturb Google by changing tags abruptly. Then we introduce that big flamboyant "Alyssa" in between spans.
There could be any number of text formatting properties within the quotation marks of the style attribute. If we turned against our subject, we could decide to do so with a text decoration property:
<h3 style="text-align: center" >Astrological Consultations By<span style="color:hsl(322, 100%, 50%); font-family: prata; font-size: 40px; text-decoration: line-through">Alyssa</span></h3>
Here's what it looks like on this site in a Markdown Block:
Astrological Consultations ByAlyssa
Since the code is appearing on this website, not the one it was written for, it's different. I've put it in H3 tags, not H1, since I don't want to mislead Google too much about this content. And since neither Scriptina nor Gill Sans Light are Google fonts, I can't use either of them here without loading custom fonts. Instead you get Bebas Neue, the H3 font on this site, and Prata, the H1 font. In general, use custom fonts sparingly if you care about SEO. They do slow down your site.
Doesn't look very good, does it? You can see why it's usually a bad idea to combine different fonts on the same line.
Code Blocks Vs. Markdown Blocks
A final point. If you look in Squarespace's Style Editor for Scriptina or Gill Sans Light, you won't find them, since they're not Google fonts. They need to be loaded separately. Which means you will have to use code injection. Which you have to have a Business Plan for. Which defeats the purpose of putting the HTML in a Markdown Block instead of a Code Block. All of which goes to show the change of policy by Squarespace to charge for using Code Blocks and Code Injection makes us jump through some hoops which have nothing to do with doing business. But if you want to use two fonts that are included in Google fonts, you can use the Markdown Block for those, and you won't need a Business Plan for that.
Want To See More Squarespace Hacks?
Check out custom CSS tricks and other code hacks that will help you design a better Squarespace website.