Add Custom Fonts To Your ConvertKit Form

You have custom fonts you’ve installed on your site and you want your ConvertKit forms to stay on brand. Not a problem. First, make sure to install your fonts onto your site and that they’re working. You can click here to learn how to install fonts on your site.

How do I find out what font I’m using?

If you aren’t sure what fonts are being used on your site you can check out WhatFont chrome extension

Below is some code to add to your stylesheet using a text editor (I’m using CodeAnywhere). Copy and paste in your CSS file (style.css) and change your font-family to the name of your font.

.ck_label {
	font-family: 'font name',sans-serif !important;
}
.ck_form_content p {
	font-family: 'font name', sans-serif !important;
}
input, .ck_form, .ck_label, .ck_subscribe_button { 
font-family: "font name",sans-serif !important; 
}

My example:

Make sure to save your work!

And now all of your ConvertKit forms will be using your site’s font like magic!

Why Use !important in the CSS file?

Well, you actually shouldn’t use it however in this case we need to override ConvertKit’s native font with yours.

pro tip

Not seeing the changes? Clear your browser’s cache.

Get more tutorials like at Master ConvertKit.