All Collections
Grow
Forms
How to Add Custom Fonts to Your Form
How to Add Custom Fonts to Your Form

Match the font of your Form to the font on your site!

Updated over a week ago

Let's dive right in! 

Important: This is an advanced article and does require knowledge of what fonts you have available on your site as well as some code editing.
​ 
First, copy the code below into a text editor. Then you'll want to replace the font example, 'Indie Flower', cursive !important;, with your actual font name. 

Once you've replaced all the example fonts with your desired font, copy and paste the entire chunk of code, and place it in the Custom CSS box under General styles in the Form builder.

Note: You must have the font available on your site for the Form to detect this.

::-webkit-input-placeholder { 
font-family: 'Indie Flower', cursive !important; }
::-moz-placeholder {
font-family: 'Indie Flower', cursive !important; }
:-ms-input-placeholder {
font-family: 'Indie Flower', cursive !important; }
:-moz-placeholder {
font-family: 'Indie Flower', cursive !important; }

Be sure to also include this as well:

input, * { font-family: 'Indie Flower', cursive !important; }

or for legacy forms:

input, .ck_form, .ck_label, .ck_subscribe_button { font-family: 'Indie Flower', cursive !important; }

 The asterisk * applies the styles to all text on the Form.

See an example below, using the universal Courier New font:

To accomplish the above font, we inserted the following into the Custom CSS box:

input, * { font-family: Courier New, sans-serif !important; }

NOTE: While custom fonts are supported in Forms and Landing Pages, they are not supported in emails.

Did this answer your question?