OptinMonster Documentation

Documentation, Reference Materials, and Tutorials for OptinMonster

Home

Docs

How to Use a Custom Font

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; } 

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

Get Started With OptinMonster Today!

BONUS: Done-For-You Campaign Setup ($297 value)

Our conversion experts will design 1 free campaign for you to get maximum results – absolutely FREE!

Click here to get started →

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.

Note:

Please be aware that the below code will also disable pre-loading of images along with the webfonts as there’s no way to disable them individually.

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

Still stuck?

How can we help?

Last updated on


Start Getting More
Leads & Sales Today
with OptinMonster!

Create and launch smart capture forms today in minutes. What are you waiting for?

Create and launch smart capture forms
today in minutes. What are you waiting for?

OptinMonster has transformed our business. Before integrating their optins, our clients saw a 2% conversion rate from web traffic, which is slightly above the standard for their industry. With the integration of OptinMonster’s lightbox popup, exit-intent technology, split testing, and other tools, our client’s conversion rates soared by an unprecedented 500%. They attracted substantially more customers while spending less on digital advertising. Their success propelled them to the top of their markets, outperforming national chains and other medical spas with much bigger marketing budgets. Our client’s success in their market has distinguished us in our own. We are now one of the most sought-after marketing firms in the industry of aesthetic medicine. We know that the integration of OptinMonster, more than any other tool or marketing strategy, has supported this growth and achievement.

chris zelig medstar media

Chris Zelig

Partner, Medstar Media

OptinMonster has been a game-changer for us. From driving donations to collecting new leads, there is nothing that this simple tool has failed to accomplish. Our lead collection rate has jumped by over 1,000%.

joe lowe american bird conservancy

Joe Lowe

Director of Digital Communications, American Bird Conservancy

Through OptinMonster’s exit-intent popups, we have more than doubled our sales conversion rate. Best of all is the compound effect of using OptinMonster over a long period of time—more conversions mean more customers, which means more word of mouth.

mitch smith, managing director, shockbyte

Mitch Smith

Managing Director, Shockbyte.com