how to apply custom font to form in jotform?

  • Profile Image
    Umesh91
    Asked on September 03, 2014 at 12:58 AM

    Hello Team

    I have created contact us form using blank form template and i want header text to be displayed in custom font "bangothic" .So i have added the custom css by selecting the prefrences option the css which i have added is 

    @import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700|PT+Sans+Caption:400,700);

    /*!
     *  Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
     *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
     */
    /* FONT PATH
     * -------------------------- */

    @font-face {
      font-family: 'bankgothic';
      src: url('../resources/font/1532.ttf');
      font-weight: bold;
      font-style: normal;
    }

    and i have applied these styles to the header as

    h2
    {
    font-family: @font-face;
    font-size: 24px;
    color: #000000;
    text-transform: uppercase;
    margin-top: 0;
    }

    but it will not take effect for the header so please let me where it is wrong?

     

  • Profile Image
    ashwin_d
    Answered on September 03, 2014 at 03:20 AM

    Hello Umesh91,

    You should actually apply the custom font to any specific css class. If you need to apply it to just the header part of your form, you should replace the h2 css code in your form and inject the following custom css code:

    .form-header

    {

    font-family: 'bankgothic';

    font-size: 24px;

    color: #000000;

    text-transform: uppercase;

    margin-top: 0;

    }

    I would suggest you to please take a look at the following guide on how to use google fonts in your form and that should help you:  http://www.jotform.com/help/100-Beautify-your-Form-with-Google-Web-Fonts 

    Hope this helps.

    Do get back to us if you have any questions.

    Thank you!