How to change the promo pop-up fonts in Squarespace

This tutorial is for both versions of Squarespace, 7.1 and older versions built with 7. For more information, visit insidethesquare.co/themes

You can use the special design menu to change the fonts for every single element of your promotional pop-up, or you can use one line of code to change them all at once!

If you haven't started using this feature yet, check out this Promo Pop Up Overview:

Before we dig in, it’s important to know that this feature is only available for business and commerce plans, at least at the time of posting this. If you are on a personal plan, you don’t have to sign up for a whole year of the advanced plans; you can upgrade for a month or two while you need the popup!


Here is the code example from this tutorial:

.sqs-popup-overlay * {font-family:Poppins!important}

Remember, this will only work if you are already using that font on your site!

If you need to add a custom font, check out this tutorial. It's a little old BUT the concept and codes still work.

insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

Learn CSS for Squarespace in my free class:
→ insidethesquare.co/learn

https://insidethesquare.co
Previous
Previous

How to add a border to the promo pop-up in Squarespace

Next
Next

How to create a marketing popup in Squarespace