# How to Add Fonts

It’s a breeze to customize your popup campaigns’ look and match your brand identity with Popupsmart’s advanced customization options–this includes defining new Google fonts for your campaign in addition to the built-in font faces.

Furthermore, you can add new Google fonts or use your custom font family with the help of CSS.

# Adding Google Fonts

Step 1: Click on a text section from the lefthand menu on the popup editor screen.

Step 2: Turn on the Advanced Customization toggle.

Step 3: Click on Font Family and select Add more Google Fonts from the dropdown menu.

Step 4: Search for font names or select fonts to add them.

• 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 at the bottom of the Font Family menu.

# Adding Custom Fonts Using CSS

Popupsmart allows modifying your popups with custom CSS, including adding your own custom fonts. Note that this process might require minimum coding knowledge.

Using custom fonts for your campaigns is ideal for:

• Keeping your popup designs consistent with your brand identity

• Matching your website design with your campaign

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

Step 1. Navigate to the Customize tab and click on Edit General Appearance.

• Scroll down to the Custom CSS field from the left-hand menu.

Step 2. Copy-paste and format the following CSS code snippet as you like.

.popupsmart .ps-elm-description {

font-family: 'Helvetica'!important}

• .popupsmart .ps-elm-description You can change the “description” part as “headline” in order to format the font type of your popup’s headline.

• Specify the font family of your choice where it says “Helvetica.”

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

Step 3. Save any new changes you make. Save to publish later or Save & Publish and turn the status on to set it live.

• Use the Debug Mode if your popup doesn’t display correctly. It is the bug icon on the right middle corner on the popup builder screen.

• Use the Preview Mode (the eye icon) if you’d like to preview your popup on your website without setting it live.

Important: Note that you need to publish your campaign at least once for Debug and Preview modes to appear and work. Keep the campaign status off not to show it on your website.