Use a Custom Font in Your Campaign

Lisa Fockens Updated by Lisa Fockens

In this guide, we'll tell you how you can use a custom font in your popups.

We’ll detail two methods:

  • One for fonts that are already present on your website
  • A second method for fonts that are available on Google Fonts

Adding a font that’s already used on your website

Note: With this method, the font won’t be applied in the builder or in preview. To get a realistic preview of the popup, you’ll have to test it directly on your website. This article will help you display it on a test page.

Step 1:

Open the popup in the builder.

In the left menu, select “Popup” and click “CSS”.

Step 2:

Copy and paste the following code into the CSS editor, replacing "Charmonman" with the name of your font.

*, input::placeholder {
 font-family: 'Charmonman';

Step 3:

With the code that we added, the font will be applied to the entire popup. If you want to apply it to specific elements, you can replace the * at the beginning of the code with something less inclusive. 

You can find more info about the available selectors on this page.

Here’s a quick example of how to apply the Charmonman font to the text blocks only.

.wisepops-block-text * {
    font-family: 'Charmonman';

Adding a Google Font

Step 1:

Open Google Fonts and search for your font.

Step 2:

Once you've found it, click "Select this font" in the upper right corner.

Step 3:

In the popup that slides up, select "Customize" and select the styles you'll need (for example, Bold and Italic).

Step 4:

Click "Embed" and select "@IMPORT".

Step 5:

Copy the line between the <style> tags.

(Keep the Google Font page open, we'll come back to it later.)

Step 6:

Log in to your Wisepops account and open your popup. In the left menu, click "Popup" and "CSS".

Step 7:

Paste the import code in the "Add custom CSS" field. (In my example, I would paste in: @import url(',700');)

Step 8:

Create a CSS rule to apply the font inside your popup. For example, if you want to apply this font to everything inside the popup, paste the following code immediately after the CSS:

*, input::placeholder {
  /* Replace this line with the CSS declaration */

Or if you want to apply it on text blocks only:

.wisepops-block-text * {
  /* Replace this line with the CSS declaration */


Step 9:

Back in Google Fonts, copy the second line of code:

Paste it into the rule, over the phrase that says "Replace this line with the CSS declaration". You can add !important at the end of the declaration, to make sure that the rule will be used.

You should end up with something like this:

@import url(',700');
*, input::placeholder {
    font-family: 'Charmonman', cursive !important;

Step 10:

In the previous example, we applied the custom font to the entire popup content using the * symbol. You might want to apply the font only to specific elements instead.

Here are a few examples of frequently used selectors:

  • On text blocks: .wisepops-block-text span
  • On the sign-up button: .wisepops-block-signup button 
  • On sign-up fields: .wisepops-block-signup input, .wisepops-block-signup input::placehoder 

More about the available selectors on this page.

Adding a font that is self hosted

Google Fonts brings some interesting optimizations but is not mandatory. You are free to use a font that is hosted anywhere. Instead of the @import instruction, you can use @font-face to directly load the font file, for example:

@font-face {
  font-family: "Charmonman";
  src: url("") format("woff2");

How did we do?

Create a Thank You Message (or Display a Coupon) After Sign-Up

How to Use the Custom Position for Bars