{"id":89793,"date":"2023-03-29T09:19:30","date_gmt":"2023-03-29T13:19:30","guid":{"rendered":"https:\/\/optinmonster.com\/?post_type=optinmonster_docs&#038;p=89793"},"modified":"2025-07-25T15:51:12","modified_gmt":"2025-07-25T19:51:12","slug":"how-to-use-a-custom-font","status":"publish","type":"optinmonster_docs","link":"https:\/\/optinmonster.com\/docs\/how-to-use-a-custom-font\/","title":{"rendered":"How to Use a Custom Font"},"content":{"rendered":"\n<p>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.<\/p>\n\n\n\n<p>In this article, you&#8217;ll learn how to use a custom font with your OptinMonster campaign.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Before You Start<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>This article assumes you&#8217;re already familiar with our <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">Custom CSS tool<\/a>.<\/li>\n\n\n\n<li>The custom font you choose to use with your campaign must already be embedded on your website.<\/li>\n\n\n\n<li>The custom font you implement with your campaign may not appear in the campaign builder&#8217;s preview. We recommend you preview the campaign on your website directly.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Add Custom Font<\/h2>\n\n\n\n<p>To use a custom font for your campaign, you&#8217;ll add custom CSS using OptinMonster\u2019s custom CSS tool by following the steps outlined in our <a href=\"https:\/\/optinmonster.com\/docs\/how-to-use-optinmonsters-custom-css-tool\/\" target=\"_blank\" rel=\"noopener\" title=\"\">guide<\/a>.<\/p>\n\n\n\n<p>To apply the same custom font to all text in your campaign, add the following example and update the font family &#8220;<code><strong>Proxima Nova<\/strong><\/code>&#8221; to match the custom font you wish to use:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/joerzgq5.js\/\"><\/script>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"597\" src=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2024\/10\/add_custom_font-1024x597.png\" alt=\"\" class=\"wp-image-196819\" srcset=\"https:\/\/optinmonster.com\/wp-content\/uploads\/2024\/10\/add_custom_font-1024x597.png 1024w, https:\/\/optinmonster.com\/wp-content\/uploads\/2024\/10\/add_custom_font-300x175.png 300w, https:\/\/optinmonster.com\/wp-content\/uploads\/2024\/10\/add_custom_font-768x448.png 768w, https:\/\/optinmonster.com\/wp-content\/uploads\/2024\/10\/add_custom_font.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n\n\n<h2 class=\"wp-block-heading\">Troubleshooting<\/h2>\n\n\n\n<h5 class=\"wp-block-heading\">How can I apply the same custom form to all of my campaigns without adding CSS code to individual campaigns?<\/h5>\n\n\n\n<p>Instead of adding code to each campaign individually, you can add one code to your site to apply a custom font to all of your campaigns.<\/p>\n\n\n\n<p>To do this, add the following CSS to your website&#8217;s stylesheet file.  This can usually be done in your theme settings or through a plugin that allows you to add custom CSS. Be sure to update the font family &#8220;<code><strong>Proxima Nova<\/strong><\/code>&#8221; to match the custom font you wish to use:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/rovx9332.js\/\"><\/script>\n\n\n\n<h5 class=\"wp-block-heading\">How can I apply the custom font to just a specific element in the campaign?<\/h5>\n\n\n\n<p>You&#8217;ll want to update the CSS selector to indicate the specific element you want to style. This will vary depending on your specific campaign.<\/p>\n\n\n\n<p>For example, if you want to apply the custom font only to text with the <code><strong>.my-headline<\/strong><\/code> class within your campaign, you would use the following code:<\/p>\n\n\n\n<script src=\"https:\/\/library.wpcode.com\/embedjs\/x5n1jjko.js\/\"><\/script>\n\n\n\n<p>If you&#8217;re not sure how to accomplish this, please <a href=\"https:\/\/optinmonster.com\/docs\/getting-support-for-optinmonster\/\" target=\"_blank\" rel=\"noopener\" title=\"\">reach out to us in support<\/a>.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">How do I disable Pre-loading of Web Fonts?<\/h5>\n\n\n\n<p><span style=\"margin: 0px; padding: 0px;\">To disable the pre-loading<\/span> of web fonts, please refer to our detailed guide&nbsp;<a href=\"https:\/\/optinmonster.com\/docs\/how-to-disable-google-webfonts\/\" target=\"_blank\" rel=\"noopener\" title=\"\">here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;ll learn how to use a custom font with your OptinMonster campaign. Before You Start Add Custom Font To use a custom font for your campaign,&nbsp;&hellip;<\/p>\n","protected":false},"author":7338,"comment_status":"open","ping_status":"closed","template":"","documentation\/categories":[96],"documentation\/tags":[31457,31487],"class_list":["post-89793","optinmonster_docs","type-optinmonster_docs","status-publish","hentry","categories-extending"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/89793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/types\/optinmonster_docs"}],"author":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/users\/7338"}],"replies":[{"embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/comments?post=89793"}],"version-history":[{"count":17,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/89793\/revisions"}],"predecessor-version":[{"id":196868,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/89793\/revisions\/196868"}],"wp:attachment":[{"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/media?parent=89793"}],"wp:term":[{"taxonomy":"categories","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/categories?post=89793"},{"taxonomy":"internal_tags","embeddable":true,"href":"https:\/\/optinmonster.com\/wp-json\/wp\/v2\/documentation\/tags?post=89793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}