How can I change the font in widgets?

  • Profile Image
    truindependence
    Asked on December 04, 2017 at 02:03 PM

    My end user has requested that we make the font for the Input of the fields consistent. Currently, the Masked input field ("enter your investable assets to estimate your fee") and the calculation field (Annual Fee) are different fonts. I have tried various CSS configurations but cannot hit on the right one. I don't really care what the font it, so long as they match. Any ideas?

     

    Thanks in advance!!

  • Profile Image
    Kevin_G
    Answered on December 04, 2017 at 02:24 PM

    To change the font for the form calculation widget you can inject this code to the form: 

    [data-type*="control_calculation"] input{

        font-family: monospace;

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    For the masked input widget you can inject this code: 

    #maskedInput {

        font-family: monospace !important;

    }

    This needs to be injected to the widget: https://www.jotform.com/help/428-How-to-Inject-CSS-Codes-to-Widgets 

    Please note that you may replace the font "monospace" with the font you want. 

    I hope this helps. 

  • Profile Image
    truindependence
    Answered on December 04, 2017 at 02:30 PM

    Thanks Kevin, I injected the CSS into the widget but it did not change the input text. Am missing something? thanks.


    The form can be viewed here: https://form.jotform.com/73175838087165


    am i https://form.jotform.com/73175838087165https://form.jotform.com/73175838087165https://form.jotform.com/73175838087165

  • Profile Image
    Richie_P
    Answered on December 04, 2017 at 02:40 PM

    You can use

    #input_8{

    color:red;

    }

    to change the input text to red.