Categories
active arrowAccount
active arrowGetting Started
active arrowCampaign Builder
active arrowAdvanced Design Customization
active arrowEmail Campaign Customization
active arrowSegment & Targeting
active arrowAnalytics
active arrowShopify
active arrowEmail Marketing and CRM Integrations
active arrowHow to Share Your Popup Form and Submission with a Link
active arrowHow to Create a Custom Popup with a Blank Popup Template?
active arrowHow to Create a Full Screen, Lightbox, and Floating Bar Popup
active arrowHow to Create Well-Designed Campaigns with Themes?
active arrowHow to Use Column & Row Structures Efficiently in a Popup?
active arrowDiscover the Customize Step of Popupsmart
active arrowHow to Adjust Popup Style
active arrowHow to Create a Multi-step Popup?
active arrowWhat is a Success Popup? How Does it Work?
active arrowWhich Elements Can I Add to My Popup?
active arrowHow to Add Fonts on Popupsmart
active arrowHow to Prefill Form Fields
active arrowHow to Add Hidden Inputs to Your Popup Campaigns?
active arrowHow to Add New Elements & Use Drag and Drop Editor
active arrowHow to Add New Form Fields to My Popup
active arrowHow to Add a Privacy Policy on Popupsmart?
active arrowHow to Add a Coupon Code to Your Popup
active arrowHow to Activate the Countdown Timer
active arrowHow to Add an Animation to a Popup?
active arrowHow to Create a Video Popup on Popupsmart
active arrowHow to Add Lottery Ball Gamification on The Popup?
active arrowHow Debug Mode Works
active arrowHow Preview Mode Works
active arrowDesktop & Mobile Views Working Method
active arrowHow to Use Smart Tags - Dynamic Text Replacement
active arrowWhat Is Teaser? How Teaser Works
active arrowHow to Set Up Autoresponder Email Notifications
active arrowHow to Set up Self-Email Notifications
active arrowHow to Create an A/B Testing for a Popup Campaign
active arrowHow to Call JavaScript Function with a Button Using Popupsmart

How to Add Fonts on Popupsmart

With Popupsmart’s comprehensive customization options, it’s simple to alter the appearance of your popup campaigns to reflect your brand identity.

These choices include adding additional Google fonts to the built-in font faces for your campaign.

Additionally, with the aid of custom CSS, you can utilize your own custom font family or add new Google fonts.

Adding Google Fonts

1. Move to the Style step of your campaign and choose Text Size & Colors under the Basic section.

style basic text size

2. Under the Text Size & Colors, arrange the fonts of your elements by adding More fonts.

more fonts

3. It is possible to search or choose among Google fonts. So feel free to find what you exactly need with your brand.

google fonts

Each font you click on will be added to the prior Font Family dropdown menu.

Close the opening modal window once you’re done.

Newly added fonts will be listed under the Font Family dropdown menu you first checked.

4. Then, you will see the fonts you selected under the “Font Family” menu. Select the font you want to use, and click the “Save & Publish” buttons when you finish.

font family menu

Adding Custom Fonts Using CSS

Popupsmart allows you to customize your popups with custom CSS so that you can add your custom fonts.

Keep in mind that this action might require minimum coding knowledge.

Using custom fonts for your popup campaigns is ideal for:

• Keeping your popup designs consistent with your brand’s identity

• Matching your website’s overall design with your campaign

Follow the steps below to add a custom font to your campaign.

1. On the “Style” section, click Advanced to reach elements and arrange their Custom CSS.

advanced style

2. After you reach the details of the elements, scroll down to the Custom CSS field. Then, copy-paste and format the CSS code snippet as you like. It needs to look like this:

.headline-p_cqwpr5xy4m80 {
font-family: "Roboto"
!important;
}
custom css

3. You need to change the first part based on your element class.

Go to the "Headline" if you want to change the "headline-p_cqwpr5xy4m80" part, which is the headline's element class.

Check your element's element class and add it before the font-family part.

element class

• Specify the font family of your choice where it says "Roboto."

• Note that there has to be !important after the font family specification.

4. Save any new changes you make. Then, move on to Publish to see your popup live. That’s all!

See Can I Add Custom CSS to My Popup? for more details about custom CSS.

If you have any questions about adding fonts to your popup campaigns, feel free to contact us!