adding space and changing fonts

I am unable to give you a link because the site is not “live.” But I’m having problems changing the font and adding margin within the group panel. I have been trying every code I can find when I use the inspect took on Firefox, but when I save the form, it doesn’t work.

I have changed the font for the labels, but for any checkboxes or anything else that is an element within the field, the font is too small and doesn’t match the label font. This is the code I’m using
.bootstrap-wrapper.SfFormElementContainer .rednao-control-group .rednao_control_label{
font-weight:normal !important;
Font-Family:Playfair Display !important;
font-size:18px !important;
color: #000000;
}
*I want all font within all forms to be the same font and size. The font needs to be Playfair and the size needs to be 18px. What code can I add to the theme CSS file to change all font in all forms?

Also, I have added several fields within a group panel so I could add a border around all the fields. But the fields I added within the group panel are flush to the edge, I want to add a little space on the left and right. I’m looking for code that I can add to the theme CSS file so whenever I use the Group Panel on any form, there is space on the left and right. When I have added code – it either doesn’t work or when I add it, the fields get really funky and I can’t decrease the size of the fields to make it work.

Here is the code I was using to add space. when I did add space, I could not have 3 fields on the same line:
#content .wpb_alert p:last-child, #content .wpb_text_column :last-child, #content .wpb_text_column p:last-child, .wpb_alert p:last-child, .wpb_text_column :last-child, .wpb_text_column p:last-child {
margin-bottom: 5px !important;
margin-left: 3px !important;
margin-right: 3px !important;
margin-top: 5px !important;
}