In this guide, we'll share 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

For a Font That’s Already Present on Your Website

Note: With this method, the font won’t be applied in the editor 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 editor.
In the left menu, select “Popup” and click “CSS”.

 

Step 2:

Copy and paste the following code into the CSS editor:

* {
 font-family: 'Charmonman';
}

Replace ‘Charmonman’ with the name of your font.

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: the following CSS code will apply the Charmonman font to the text blocks only.

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

 

For a Google Font

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');)

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, 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, 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('https://fonts.googleapis.com/css?family=Charmonman:400,700');
* {
    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.


For 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("http://example.com/fonts/charmonman.woff2") format("woff2");
}

Did this answer your question?