In this guide, we'll share how you can use a custom font in your popups.
If you think your font is popular and should be included in our default font list, don't hesitate to contact us.

Step 1:

Open Google Fonts and look 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 WisePop. In the left menu, click "Popup" and "CSS"

Step 7:

Paste the import code (in my example: @import url('https://fonts.googleapis.com/css?family=Charmonman:400,700');)

Note: You might choose to skip the @import if you know that the font is already loaded into your website. However, the preview of the popup won't be exact without the @import.

Step 8:

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

* {
  /* Replace this line with the CSS declaration */
}


Step 9:

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

Paste it into the rule, at the place of /* 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('https://fonts.googleapis.com/css?family=Charmonman:400,700');

* {
    font-family: 'Charmonman', cursive !important;
}


Apply the font only to select elements

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

You will need to replace the selector *  by something less inclusive.
You can find more info about the available selectors on this page.

Here are a few examples of frequently used selectors:

  • On text blocks: .wisepops-block-text span
  • On sign-up button: .wisepops-block-signup button 
  • On sign-up fields:
    .wisepops-block-signup input, .wisepops-block-signup input::placehoder 
Did this answer your question?