-
RFOneVisionAsked on February 8, 2018 at 11:11 PM
To match our current website, I would like to change the font for absolutely every form field and element to 'Effra light'. This font is not available in Form Designer.
How can I do that?
Thanks
-
RFOneVisionReplied on February 8, 2018 at 11:13 PM
I would also like labels to be bold.
Thanks.
:)
-
Nik_CReplied on February 9, 2018 at 5:43 AM
The only way to use custom fonts is to rule:
@import url(link to font api);
And then you set the font in the form via CSS:
.form-all *{
font-family: 'name of the font family', sans-serif;
}
If you can find any similar font on Google https://fonts.google.com/, you can easily do that.
Regarding the bold of the labels, you can insert this:
.form-label {
font-weight: bold!important;
}
To your Custom CSS field.
But please be mindful that if Theme is used, it might override any entered CSS.
Let us know if you have any further questions.
Thank you!
-
RFOneVisionReplied on February 9, 2018 at 8:27 AM
I have inserted the following:
/* Override remnants of source template-fix bug */
.form-label, .form-input, .form-input-wide {
background : none !important;
border : none !important;
font-family:'effra light',sans-serif;
font-weight: bold !important;
}/* Set font for whole form */
.form-all {
font-family:'effra light',sans-serif !important;
background : #d5eef3 !important;
}The form-label font-value works, but not the font-weight.
The form-all font-family doesn't do a thing, even if form-label para is removed.
Any ideas about why .form-all doesn't use the font, and why .form-label bold doesn't work?
Thanks
-
Mike_G JotForm SupportReplied on February 9, 2018 at 10:28 AM
Like what my colleague, Nik_C, have mentioned above, you need to use the @import rule — https://www.w3schools.com/cssref/pr_import_rule.asp so you can use the font to your form.
Here is an example of a font URL — http://fonts.googleapis.com/css?family=Open+Sans
As for making the field labels in your form bold, I have checked your form and I see that the field labels are bold. If that is not what you are seeing on your end, can you help us determine the issue by sending us a screenshot, please?