Can I upload a WOFF2 file to Popupsmart?

The official guide lists TTF, OTF and WOFF, but does not list WOFF2. Use a documented format or confirm WOFF2 support with Popupsmart before relying on it.

Can I reuse the example CSS class for my own popup?

Replace the example selector with the class shown in your element’s details panel. The vendor’s sample class identifies its example element and is not a universal headline selector.

How to add Google Fonts or a brand file in Popupsmart

Choose a Google Font for a quick change, upload a font file to match your brand, or use CSS for a specific element. Adding a family and applying it are separate steps: check the headline, body, form and button before publishing.

Setup source: Popupsmart’s font guide, checked September 6, 2026. The checks below are editorial recommendations, not results from a client campaign. For plan access, consult our Popupsmart pricing guide and your account before upgrading.

Choose a font method

Your task	Editor location	What to prepare
Choose a Google Font	Style → Basic → Text Size & Colors → More fonts	Family name and the text elements to update
Upload a brand font	Settings → Custom Fonts	A licensed `.ttf`, `.otf` or `.woff` file
Style one element with CSS	Style → Advanced → Custom CSS	The element’s own class and an available font family

Add and apply the font

For Google Fonts, search in More fonts, select the family, close the picker and choose it in Font Family. For a file upload, choose your file under Custom Fonts, then apply the new family from the same dropdown. Preview and use Save & Publish.

For CSS, get the class from the element details panel. Follow the vendor’s !important instruction and replace this illustrative selector with your actual element class:

.your-element-class {
  font-family: "Your Brand Font", sans-serif !important;
}

A font-family declaration names a font; it does not by itself download a font file. Make the family available first. The fallback keeps text usable if the preferred font cannot load, although it can change line breaks.

Check the result before publishing

Use this acceptance checklist on a narrow mobile screen and desktop. Repeat it on the published campaign because an editor preview does not prove the visitor’s browser loaded the font.

Content fit: Try the longest headline, button label and validation message. Look for clipped text or a button pushed outside the popup.
Character coverage: Check accented characters, currency symbols and the languages your campaign uses.
Weight and spacing: Compare normal and bold text. Confirm that a heavier heading remains readable and does not crowd the close control.
Form usability: Check input text, placeholders, errors and the success step. A headline change alone does not establish that every element uses the intended family.
Slow loading: Reload with browser network throttling. Confirm that the offer and action remain understandable while fonts load; record any noticeable layout shift.

Troubleshoot an unexpected font

What you see	What to check next
Family appears in the picker but the text is unchanged	Select the affected element and confirm its applied family; adding a family alone is insufficient.
Preview works but the published popup differs	Confirm the campaign changes were published, then inspect the live element’s computed font and font requests in browser developer tools.
Only some characters look different	Check whether the font contains those characters; a fallback may be supplying missing glyphs.
Headline works but the button does not	Inspect the button’s own settings or selector. Avoid changing every site element with a broad CSS rule.
Font request fails	Inspect the request status and browser console. Investigate the reported error before changing hosting or site policies.

Keep a record of the original family and settings so you can restore them if readability worsens. Choose a font for clear reading and brand consistency; do not assume that changing typography will increase conversion without a separate measurement plan.

Continue with campaign metrics or return to Popupsmart help.

How Can I Add Fonts to My Popup on Popupsmart?