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” where our optin’s unique slug is jk2jfc9zdulyv598 :

html div#om-jk2jfc9zdulyv598 * { 
   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 Setup panel of the optin builder.

Customize the font family used for your whole optin using CSS.

IMPORTANT NOTES:

1. The sample CSS above must be modified to target your own optin — each optin has it’s own unique CSS Selector that contains the optin’s slug. The CSS Selector can be found by selecting the question mark icon next to the Custom CSS label.

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