What CSS selector for changing the font-family for all the text on the form?

fribse 18 Apr, 2019
Hi there

I'm trying to find a common selector for setting the font family in CSS for the entire form.
It's the last bit of tweaking of the form, and I really don't like mixed fonts on the website, so what selector should I use?

The form is here:

I have Montserrat for the rest of the site.
I've placed a CSS item in the top of the form, and I can set the family from firefox developer, but I can't find a common selector for all fields, headers etc.
Max_admin 18 Apr, 2019
form {font-family:.... !important;}
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
fribse 18 Apr, 2019
I tried this, but I don't see it working,
Max_admin 18 Apr, 2019
You did not use the !important rule, and please try this selector instead:
.ui.form label
Best regards
ChronoForms developer...
Did you try ChronoMyAdmin for managing your Joomla database tables ?
fribse 19 Apr, 2019
Whoops, you were right, a bit hasty with that.
But that selector only sets it for the labels, and then I have to add a lot of selectors like:
.ui.form label, .ui.header.dividing, .green, .ui form G2-form {
font-size: 0.95em!important;
font-family: 'Montserrat'!important;
.ui.header.dividing {
font-size: 210%!important;
Any more you can think of?
I tried .chronoforms, but that didn't work for some reason???
fribse 23 Apr, 2019
Nope, that didn't do it either 😢
healyhatman 23 Apr, 2019
You only need the quotes when your font has whitespace in the name.

Have a look at an offending text item in the developer tools (right click, inspect) it will show you what rule is overriding your custom CSS.
fribse 23 Apr, 2019
That's what I've been using so far.
I can see that the css
.ui.header {
border: none;
margin: calc(28px - .14285714em) 0 14px;
padding: 0 0;
font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
font-weight: 700;
line-height: 1.28571429em;
text-transform: none;
color: rgba(0,0,0,.87);
kills it, and that is coming from
And also if I untick that, the
even if I have set !important after the font-family.

I was hoping there was a 'authorized' way of hitting the text as a whole for the form.

So the best so far is:
.ui.form *, .ui.header.dividing, .green {
font-size: 0.95em!important;
font-family: Montserrat!important;
.ui.header.dividing {
font-size: 210%!important;#
} {
font-family: icons !important;
Last one has to be added, as the (i) looked weird.
This topic is locked and no more replies can be posted.