How can I use custom webfonts (not Google Webfonts) in my form?

  • Profile Image
    amapecage
    Asked 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!!!

  • Profile Image
    jefreylandicho
    Answered 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
    amapecage
    Answered 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
    amapecage
    Answered 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
    Welvin
    Answered 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
    amapecage
    Answered 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
    amapecage
    Answered 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
    amapecage
    Answered 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
    Welvin
    Answered 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

  • Profile Image
    phonefixers
    Answered on February 22, 2017 at 04:06 AM

    I have a font file and not a link for the font. How can i upload that to get a link and inject the css.
  • Profile Image
    Nik_C
    Answered on February 22, 2017 at 06:11 AM

    @phonefixers,

    Since this is an older thread, I opened a separate one for you and we will attend it here shortly.

    Thank you.