Can you change the font for the Image Checkboxes Widget?

Looking to match the font with the rest of the form.

Thank you kindly!

Yes, you can.

Example, you can enter something like this in your CSS code:

li label{

font-weight: 900 !important;

font-size: 24px;

}


 See guide below for customizing CSS.
How-to-Inject-Custom-CSS-Codes

That worked.  I was able to change the font, size and weight.  However, I am having a difficult time getting the color to change.  

What syntax would you use to change the font color?

I am very happy because I helped you. :)

But, you must ask a new question about  the font color?

I would be glad to help you again.

Posted a new question for the powers that be.  :-)

Turns out it is not working on all browsers.  The font changes to a serif font on iOS devices.  I tried on my iOS device and other people sent me screenshots and they get serif font too.  However, on laptop running a later version of OS X it works in Safari and Chrome.  Firefox shows question marks where the labels should be.

My other laptop is running an older version of OS X and I get the serif fonts.

Code down below.  Have any idea what I am doing wrong here?

UPDATE:  I used a "web safe font" of Gill Sans and it works on all platforms and devices.  So weird since I used Open Sans Condensed on other parts of the form.

li label{

font-family: Open Sans Condensed !important;

font-weight: 600 !important;

font-size: 14px !important;

}

#checkboxesContainer {

      color:#656565;

}

Hey there,

If a device does not have the font which is specified, it will fallback to either to a specified fallback or to a serif font.

Web Safe Font basically means that it is pre-installed on a variety of devices and this way has a lower chance to encounter the problem I've mentioned above.

If you have any other questions, feel free to shoot them,

Cheers.

That does make sense.  What confused me is the fonts assigned in the Form Designer displayed properly on the other labels and body text.  Do fonts chosen in Form Designer make a call to fonts stored on the web vs.  CSS making a call to fonts installed on a local computer?

Fonts available at Form Designer are pre-installed for your forms, but the ones you are adding with custom css code are not. That is why first are displayed properly on all devices. 

From what I can read at your previous posts, I can suggest to specify a fallback font for the CSS property. Like this:

font-family: Open Sans Condensed, sans-serif !important;

If the font is not available at the device, the sans-serif font will be used, not serif as you got earlier. 

If there is anything else we could assist, just let us know.

Thank you!

Thank you Victoria.  That worked for the android and iOS devices. However, Firefox on the desktop gave me question marks for the label.  Firefox is not falling back on the other font.  I just pull switch out Open Sans Condensed for Gill Sans.  Seems to play better on all browsers.

As far as I understand, you have managed to resolve the issue by switching to another font. 

But, if you face any other problem with your JotForms, please let us know so we could help.

You all have been very helpful!

Thanks!