Adding custom CSS to your Form
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!
![](https://storage.crisp.chat/users/helpdesk/website/6394d40f722b9c00/image_18kckl4.png)
1. Add custom fonts from Google Fonts
- Go fonts.google.com
- Select embed option - @import and copy the highlighted import area
![](https://storage.crisp.chat/users/helpdesk/website/6394d40f722b9c00/image_lbealw.png)
- 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:wght@100&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
![](https://storage.crisp.chat/users/helpdesk/website/6394d40f722b9c00/image_1fu47h7.png)
Go to Custom CSS and paste this code
.designed-form-container {
margin-top: -30px !important;
}