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.
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;}
You did not use the !important rule, and please try this selector instead:
.ui.form labelBest 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:
I tried .chronoforms, but that didn't work for some reason???
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 {Any more you can think of?
font-size: 0.95em!important;
font-family: 'Montserrat'!important;
}
.ui.header.dividing {
font-size: 210%!important;
}
I tried .chronoforms, but that didn't work for some reason???
.ui.form * {
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.
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
/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:
I can see that the css
.ui.header {kills it, and that is coming from
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);
}
/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 {Last one has to be added, as the (i) looked weird.
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;
}
This topic is locked and no more replies can be posted.