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

If the font is not present on your website

Step 1:

Open Google Fonts and look for your font.

Step 2:

Once you've fount 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 opened, we'll get back to it later)

Step 4:

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

Step 5:

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

Step 6:

Copy and paste the following lines below:

.wisepops-blocks-wrapper span,
.wisepops-blocks-wrapper input::placeholder,
.wisepops-blocks-wrapper input,
.wisepops-blocks-wrapper select,
/* Do not work on firefox*/
.wisepops-blocks-wrapper select option,
.wisepops-blocks-wrapper select option:disabled,
/* Do not work on firefox - end*/
.wisepops-blocks-wrapper button,
.wisepops-blocks-wrapper textarea,
.wisepops-blocks-wrapper textarea::placeholder,
.wisepops-blocks-wrapper label.radio-input span,
/* When you delete or add a selector, the last selector must NOT have a colon/virgule */
/* this selector target the label of a checkboxes field in a sign up block */
div[class^=checkboxes__RadioFieldContainer] div


Step 7:

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

Paste it between { and } signs at the end of your code.

You should end up with something like this:

@import url('https://fonts.googleapis.com/css?family=Charmonman:400,700');


.wisepops-blocks-wrapper span,
.wisepops-blocks-wrapper input::placeholder,
.wisepops-blocks-wrapper input,
.wisepops-blocks-wrapper select,
/* Do not work on firefox*/
.wisepops-blocks-wrapper select option,
.wisepops-blocks-wrapper select option:disabled,
/* Do not work on firefox - end*/
.wisepops-blocks-wrapper button,
.wisepops-blocks-wrapper textarea,
.wisepops-blocks-wrapper textarea::placeholder,
.wisepops-blocks-wrapper label.radio-input span,
/* When you delete or add a selector, the last selector must NOT have a colon/virgule */
/* this selector target the label of a checkboxes field in a sign up block */
div[class^=checkboxes__RadioFieldContainer] div
{
    font-family: 'Charmonman', cursive !important;
}

You can also customize the code to apply the font to specific elements of your popup.

For example, the following code will apply only to your text blocks :

@import url('https://fonts.googleapis.com/css?family=Charmonman:400,700');

div[class^="TextPopupBlockReadOnly"] span
{
    font-family: 'Charmonman', cursive !important;
}

If the font is already present on your website 

Use the same code without the line that starts by "@import"
You should have something that looks like this

div[class^="TextPopupBlockReadOnly"] span
{
    font-family: 'Charmonman', cursive !important;
}

 

Did this answer your question?