Can you change the font for the Image Checkboxes Widget?

  • Profile Image
    tattoos_n_bumperplates
    Asked on April 17, 2018 at 03:47 PM

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


    Thank you kindly!

  • Profile Image
    Alexis_P
    Answered on April 17, 2018 at 04:27 PM

    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



  • Profile Image
    tattoos_n_bumperplates
    Answered on April 17, 2018 at 04:57 PM

    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?

  • Profile Image
    Alexis_P
    Answered on April 17, 2018 at 05:21 PM

    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.

  • Profile Image
    tattoos_n_bumperplates
    Answered on April 17, 2018 at 06:05 PM

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

  • Profile Image
    Scott
    Answered on April 18, 2018 at 03:46 AM

    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.

  • Profile Image
    tattoos_n_bumperplates
    Answered on April 18, 2018 at 01:04 PM

    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?

  • Profile Image
    Victoria_K
    Answered on April 18, 2018 at 02:12 PM

    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!

  • Profile Image
    tattoos_n_bumperplates
    Answered on April 18, 2018 at 02:44 PM

    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.

  • Profile Image
    Victoria_K
    Answered on April 18, 2018 at 02:56 PM

    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.

  • Profile Image
    tattoos_n_bumperplates
    Answered on April 18, 2018 at 03:00 PM

    You all have been very helpful!

    Thanks!