How to Use a Custom Font

While OptinMonster provides many fonts for you to use when designing your campaign, we also make it easy to use a custom font with your campaign.

In this article, you’ll learn how to use a custom font with your OptinMonster campaign.

Before You Start

• This article assumes you’re already familiar with our Custom CSS tool.
• The custom font you choose to use with your campaign must already be embedded on your website.
• The custom font you implement with your campaign may not appear in the campaign builder’s preview. We recommend you preview the campaign on your website directly.

Add Custom Font

To add a custom font to your campaign, you’ll add custom CSS to your OptinMonster campaign.

To apply the same custom font to all text in your campaign, add the following example and update the font-family to match the custom font you wish to use:

 html div#om-{{id}} * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; } 

Troubleshooting

How can I apply the same custom form to all of my campaigns without adding CSS code to individual campaigns?

To apply the same custom font to all your campaigns, add the following example to your website’s CSS file and update the font-family to match the custom font you wish to use:

 html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; } 

How can I apply the custom font to just a specific element in the campaign?

You’ll want to update the CSS selector to indicate the specific element you want to style. This will vary depending on your specific campaign.

If you’re not sure how to accomplish this, please reach out to us in support.

How do I disable Pre-loading of Images?

Preloading of webfonts and images does not happen by default. However, there are a few circumstances where it does happen since we cannot predict if a customer is going to trigger the campaign on their own, without our display rules triggering it first. The two areas right now are Exit-Intent and Monsterlinks.

If you want to disable the preloading of images or webfonts, you can easily do that through Api.js:

document.addEventListener('om.Campaign.init.preload', function(event) {
    var campaign = event.detail.Campaign;
    campaign.settings.preload = false;
});

If you want to make sure it only happens for a specific campaign, that can also be done:

document.addEventListener('om.Campaign.init.preload', function(event) {
    var campaign = event.detail.Campaign;
    if ({slug} === campaign.id) {
        campaign.settings.preload = false;
    }
});

If you’re serious about jumpstarting your website business growth, then get started with OptinMonster today!