Forums

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:
https://www.cleanotech.dk/da/bestilling
​
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.

try:

form {font-family:.... !important;}

I tried this, but I don't see it working,

You did not use the !important rule, and please try this selector instead:

.ui.form label

Best regards

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???

.ui.form * {

Nope, that didn't do it either 😢

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.

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
/libraries/cegcore2/assets/semantic-ui/semantic.min.css
And also if I untick that, the
inline:90
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;#
}
.icon.info.circular.blue.inverted.small.tooltipstered {
 font-family: icons !important;
}

Last one has to be added, as the (i) looked weird.