How to Use a Custom Font

OptinMonster allows you to choose many different fonts to customize the appearance of your optin, including several Google Fonts. But, you can also use a custom font for your optin that isn’t available for selection in the optin builder by following this guide.

IMPORTANT: This guide assumes you’re already familiar with our Custom CSS tool.

Custom Font CSS

You can override the default font of all the text in your optin using a single line of CSS. The following is an example of how to apply the font-family “Proxima Nova”:

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

You’ll add your custom font CSS to the Custom CSS field in the Display Settings panel of the campaign builder.

Custom CSS

NOTE: If the font-family you’ve indicated is not a system font, that font will not be applied in the Builder preview. The site you embed the campaign on must load the font-family you wish to use before the changes will be visible in the campaign.