This article is also available in:
Here is a quick overview of how to customize CSS of your form to make it look exactly how you need it. The Custom CSS option is available via Design tab > Advanced Settings.

This is helpful if you would like to change the font, color, spacing etc.

It's recommended to keep your modifications to a minimum, in the event that there are future global changes made from our end, otherwise we'll be fighting over the same style... and things might get messy!



1. Add custom fonts from Google Fonts

Go fonts.google.com
Select embed option - @import and copy the highlighted import area



Go to Custom CSS editor which is available at the bottom of Design tab > Advanced Settings
and paste this code

@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap');

* {
--global-font: 'Roboto', sans-serif !important;
}

* {
--title-font: 'Roboto', sans-serif !important;
}


This will apply Roboto font for both titles and text blocks of your form.

Change 'Roboto' to the font name which you try to apply.

2. Reduce form's top spacing



Go to Custom CSS and paste this code

.designed-form-container {
margin-top: -30px !important;
}
Was this article helpful?
Cancel
Thank you!