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 can I use custom webfonts (not Google Webfonts) in my form?

    Asked by amapecage on April 22, 2013 at 01:26 PM

    Hi!

    I've been trying to use custom fonts in a form and after trying to use the CSS code injection, it doesn' work.

    I've downloaded the zip file with the souce, I've put those files in my webserver (I've also uploaded the fonts to a folder named fonts).

    I've changed the code to load the fonts in the head section of the html file but the fonts are not used. I've been using the same code in a html file and it works so, What is wrong with the code insertion? I've been inspecting the web with the webdeveloper plugin for firefox and the fonts seems to be changed but not rendered.

    What can I do?

     

    The form in question is 31072099557358

    The site where I uploaded the code is at http://www.hackinspain.com/silestone/Proyectos%20Silestone.html

    Thanks in advance and please help!!!

    Page URL:
    http://www.hackinspain.com/silestone/Proyectos%20Silestone.html

    css code site www section
  • Profile Image

    Answered by jefreylandicho on April 22, 2013 at 01:48 PM

    I checked your website and the font source url you have provided appears to be invalid.

    Please try changing or updating the font source url. 

  • Profile Image

    Answered by amapecage on April 22, 2013 at 02:03 PM

    Thanks for your answer!

    I've used this same code in a test page and it works!

    http://www.hackinspain.com/silestone/testfuentes.html

    I've changed it to: src: url("/fonts/remachine.ttf"); and still doesn't work with the Jotform generated code but it works ok with the sample page to test the fonts.

    I've been all this evening trying o get this working but I'm havin' no luck. Any hint I can use?

    Thanks again for your help!

  • Profile Image

    Answered by amapecage on April 22, 2013 at 02:06 PM

    Sorry! I'm trying the url posted above src: url("/fonts/remachine.ttf") in my test page and it doesn't works!!! What am I doing wrong?

  • Profile Image
    JotForm Support

    Answered by Welvin on April 22, 2013 at 04:27 PM

    Hi,

    Inject this codes to your form:

     

    @font-face {

     font-family: MyCustomFont;

     src: url("http://www.hackinspain.com/silestone/fonts/Remachine.eot") /* EOT file for IE */

    }

    @font-face {

     font-family: MyCustomFont;

     src: url("http://www.hackinspain.com/silestone/fonts/Remachine.ttf") /* TTF file for CSS3 browsers */

    }

    .form-all {

     font-family: MyCustomFont, Verdana, Arial, sans-serif;

    }

    .form-all {

     font-family: MyCustomFont, Impact, "Arial Black", sans-serif;

    }

    Guide: How to Inject Custom CSS Codes

    Note, you can't see the changes on the editor. You'll have to preview the form to see that.

     

    Example:http://form.jotformpro.com/form/30762575623962? 

     

    Thanks

  • Profile Image

    Answered by amapecage on April 23, 2013 at 06:50 AM

    Hi! This is working only on Google Chrome, but at least I know it's possible to change fonts.

    Any idea about how can I make it work with other browsers?

    Is it possible to get it working with the form hosted in my server?. I've tried to inject the code into the .css files, I've added the code to the .html file and replaced the font-family statement in the code. When I inspect the code with firebug it tells me that the font family is correct but the font is not applied (none of the browsers I've tested apply the style).

    Is here any way to fix this?

    Thanks in advance, your help is very appreciated.

  • Profile Image

    Answered by amapecage on April 23, 2013 at 07:01 AM

    Nah! Forget it! I've been too stupid to see the fail!!! I've got it working!!! Sorry for any inonvenience, I need to sleep a little.

     

    Thanks again, you rock guys!!!!

  • Profile Image

    Answered by amapecage on April 23, 2013 at 09:30 AM

    OMG! I'm becoming mad, how much custom fonts can we use? If I put another font-family name or rename the MyCustomFont family, it doesn't works! I need to use three different font-family types in my form, what can I do?

  • Profile Image
    JotForm Support

    Answered by Welvin on April 23, 2013 at 10:36 AM

    Hi,

    You will need to target the ID or Class of the fields you want to change its font family.

    First, find the ID of the field by following this guide: How to Find Field IDs & Names

    Second, inject the custom Font Family using the ID.

    Example;

    From your form: http://www.jotform.com/31072099557358, the word "¿Quieres que la gente conozca tus proyectos?" have the following ID: text_28. The codes to inject are the following;

    @font-face {

     font-family: MyCustomFont;

     src: url("http://www.hackinspain.com/silestone/fonts/Remachine.eot") 

    }

    @font-face {

     font-family: MyCustomFont;

     src: url("http://www.hackinspain.com/silestone/fonts/Remachine.ttf") 

    }

    #text_28 {

    font-family: MyCustomFont !important;

    }

     

    Let us know if you need any further assistance.

    Thanks