What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    how to apply custom font to form in jotform?

    Asked by Umesh91 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?

     

    Page URL:
    http://form.jotform.me/form/42371027732449

    JotForm font custom font form template contact us form style size template
  • Profile Image
    JotForm Support

    Answered by ashwin_d 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!