How can I change the font-weight on the labels in the Sliders with Calculated Result

Hi folks, 

my form is here: https://www.jotform.com/build/81517984846876

I'm using the Google font Kanit and have imported it at 100 font-weight. I've tried adding font-weight: 100; just about everywhere, but the labels don't change...their appearance is closer to 400 if not greater.

I've achieved the correct weight with the text "the time taken is" under the second pair of sliders, and at the bottom of the form, but I'm struggling to find the correct CSS to change the weight of the other text in the form.

I'd appreciate any help you can offer - been stuck on this for a few days now!

Regards, Mark

I am investigating the issue, I will keep you updated as soon as I have a solution.

Try with this code to target each label of the slider:

.sliderTable tr:nth-of-type(1) td.label_row, .sliderTable tr:nth-of-type(1) td.value_row {

    width: 100%;

    position: relative;

    font-family: 'Kanit', sans-serif;

    float: left;

    color: #e2e2e2;

    font-weight: 100;

}

Similarly if you want to do for 'value_row' you the above code.

Let us know if you need more assistance.

Hi Roneet, thank you for getting back to me. Unfortunately, that doesn't seem to have any effect on the form.

Do you have any further ideas?

Regards, Mark

I have cloned your form and made the changes here: https://form.jotform.com/81558509106964

Feel free to clone it if it is of your liking.

Basically, what I did is, since the sliders are widgets and resides on it's own iFrame, you would need to import again the font.

@import url('https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700,800,900|Montserrat:100,200,300,400,500,600,700,800,900');

Then, I assume you would want Kanit as your default font with font-size = 18px and font-weight = 100, then I've added this line for each widget CSS and for the form CSS:

body {

    font: 100 18px 'Kanit', sans-serif !important;

}

Also, for the bold font on the results for the second and third sliders, you may want to make them the same font-weight as others. To do that, add this line on the form CSS.

strong {

  font-weight: 400 !important;

}

I've also made some cleanup on the custom CSS on my cloned form, you may want to do that also to avoid headaches when debugging CSS.

Let us know if you need further assistance.

Wow! Thank you so much, Vanessa.

That's perfect. I didn't realise they were in their own iframe. That makes sense now that you've provided that little gem of information.

Super helpful!

I'll clone yours.