How can I change the font in widgets?

  • Profile Image
    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
    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;



    For the masked input widget you can inject this code: 

    #maskedInput {

        font-family: monospace !important;


    This needs to be injected to the widget: 

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

    I hope this helps. 

  • Profile Image
    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:

    am i

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

    You can use




    to change the input text to red.