How to Add Custom Fonts to Your Form

Want the font of your form to match the font you're using on your site? If so, this tutorial is for you!

First, you'll want to 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 replace all the spots where this font name goes, copy and paste the entire chunk of code and place it under Form Settings > Style, in the Custom CSS box. Click Save. This should now change your form fonts.

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 one of these options as well:

input, .ck_form, .ck_label, .ck_subscribe_button { font-family: 'Indie Flower', cursive !important; }
	
or
input, * { font-family: 'Indie Flower', cursive !important; }
	
The asterisk * applies the styles to all text on the Form.

See an example below of this 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.

Still need help? Contact Us Contact Us