How to use multiple fonts in your Squarespace announcement bar
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 using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
I love using the announcement bar feature in Squarespace. It places in at the top of every page, and it’s great for making notifications of new content that you want to share. With 300+ posts on my blog, this feature lets me highlight important updates to anyone visiting my site. I’ve also seen it used for announcements like new products, sales, and in-person events.
No matter what you use it for - it’s a great Squarespace feature! In the site style menu, we can change the color of the announcement bar, and assign a unique font, but that’ is about it. I’ve already published a few tutorials on update the colors and integrating images (See retaliated videos liked below) and in this tutorial, you’ll learn how to feature multiple text styles in your announcement bar using custom CSS.
We’ll isolate characters based on their text type: bold and italicized. The code examples from this tutorial are below, and they are super customizable! Be sure to watch the tutorial before you use the code so you’ll understand how they work and what parts of the code you’ll need to change.
To use the announcement bar feature, navigate to Website followed by Website Tools, and there you’ll see Announcement Bar under the marketing options.
Toggle this feature on and add your own text and (optional) an active link.
For this tutorial, you’ll want to make some characters bold and or italicized so you can use custom code to change their unique style.
If this is your first time using CSS for Squarespace, awesome! 🙌 I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn
Video tutorial
Code Example
This code changed the bold text to a different font family and resets the font weight to normal:
.sqs-announcement-bar-text strong {
font-family: serif;
font-weight: normal!important;
} This code changes the color of the italic font and resets the font style:
.sqs-announcement-bar-text em {
font-style: normal;
color:red
} You can use margin, padding, and border codes to change placement and create button styles, too! Here is the full code from the tutorial. The font families being used were already installed on this site using the Site Style menu. If you aren't using those fonts on your site, it won't be able to load.
.sqs-announcement-bar strong{
font-family:Granville;
margin-right:15px
}
.sqs-announcement-bar em{
font-style:normal;
text-transform:uppercase;
border:1px solid #fff;
padding:5px;
margin-left:15px
}Free guide to font & text properties
How to feature an image on your announcement bar: https://insidethesquare.co/squarespace-tutorials/ab-image
How to add a background to your announcement bar: https://insidethesquare.co/squarespace-tutorials/ab-background
How to create a mini announcement bar in Squarespace: https://insidethesquare.co/squarespace-tutorials/mini-ab
