Using a custom font in your campaigns allows your brand identity to be consistent with your website. In this guide, we'll tell you how you can use a custom font in your popups.
We previously suggested using our CSS editor to import your custom fonts. This method is now deprecated. Before adopting this new feature, make sure that you've removed all font related CSS code in our editor.
Add a new custom font
Prerequisites
The custom font must be publicly hosted on the web. Pay attention to Cross-Origin Resource Sharing (CORS). The following HTTP header is required for the font to load in your campaigns and in our builder:
Access-Control-Allow-Origin: *
Step 1: Find the resource URL
Find the URL of your custom font. Let say that we want to use the font "Circular" from our website https://wisepops.com/:
Go to https://wisepops.com/.
Open the dev tools (F12), and go to the Network tab.
Filter by the resource type "Font".
Refresh the page, and locate the requests to load the font.
There are many variants for the same font. For the different font weight (bold), and style (italic). You'll need to provide the resource URL for each variation you want to use in your campaigns.
Step 2: Import in Wisepops
Import the custom font in your Wisepops account. You only need to do this once, per website. The custom fonts you've imported are available in all campaigns of the same website.
Edit the campaign you want to change. Focus the element that should have the custom font applied.
Click the font tool to open the fonts' dropdown. Make sure that your custom font isn't already imported. Your existing custom fonts are first in the list. To add a new custom font, click the button "My custom fonts" at the end of the dropdown.
Configure the new custom font in the modal. Enter a unique font name. Provide the resource URL for each font variant you need - the supported formats are WOFF, WOFF2 and TTF. And pick a fallback font in case the resource fails to load.
Step 3: Use the custom font
Use your custom font in your campaigns. Simply pick the font in the fonts' dropdown. Your fonts are first in the list. They're shared between all campaigns of the website.
Delete a custom font
To delete a custom font:
Make sure that no campaign is using the font. You may need to save the pending changes to stop using the font before actually deleting the font.
In the fonts' dropdown, click "My custom fonts".
Click the trash icon near your custom font.
Troubleshooting
The custom font is not used when it should be
This often happens because the font is not allowed to be used on another domain. Let's make sure that's the issue. Open the dev tools by hitting F12, and go to the Console tab. You should see something like this:
This error means that the prerequisite is not met.
If the campaign will be displayed on the same domain as the URL to load the font, the font should be correctly applied in the live campaign - it will not appear in the builder and preview.