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

    Why my custom font is not applying in the form?

    Asked by koen2000 on April 03, 2017 at 06:57 AM

    Hi, 

     

    I've added my custom font as you described multiple times on your forum. But as I see it, it is not applied. 

    https://form.jotformeu.com/70884141988368 

     

    the folder where i've placed the font is correct. 

    Can you have a look? 

    I use this CSS lines: 

     

    @font-face {

        font-family : MuseoSlab;

        src : url("http://www.koen2000.be/webfont/MuseoSlab-500.ttf");

    }

     

    @font-face {

        font-family : MuseoSlab;

        src : url("http://www.koen2000.be/webfont/MuseoSlab-500.otf");

    }

     

    @font-face {

        font-family : MuseoSlab;

        src : url('http://www.koen2000.be/webfont/MuseoSlab-500.eot') format('embedded-opentype');

        font-weight : normal;

        font-style : normal;

    }

    .form-all {

        font-family : MuseoSlab !important;

        max-width : 760px;

    }

    .form-label-top {

        font-family : MuseoSlab !important;

        font-size : 14px;

        color : #3c3c3c;

        font-weight : normal;

        line-height : 16px;

        padding-bottom : 3px;

        width : 250px;

    }

     

    Many thanks! 

     

    Page URL:
    https://form.jotformeu.com/70884141988368

  • Profile Image

    Answered by Sven on April 03, 2017 at 09:55 AM

    I have opened your form, and I can see the font is applied without problems. See image below:

     

    Is this the font you have injected? If yes, then what browser are using to open the form? I have opened on Google Chrome and it seems to work fine for me. 

     

    If this is not the font you have injected, then please provide more details about your issue, maybe attach screen shots of the font you would like to apply, and the font you're actually getting. And we will assist you further.

     

    Thank you.

  • Profile Image

    Answered by koen2000 on April 03, 2017 at 10:16 AM

    Hi Sven, 

    Thanks for your reply! 

    The font showing on the form is not the correct font. 

     

    on my own website it works good, i've placed 2 text samples on teh home page: www.koen2000.be 

    I've also put a screenshot: 

     

    I don't know what is wrong in the CSS code.. 

     

     

  • Profile Image
    JotForm Support

    Answered by Nik_C on April 03, 2017 at 12:10 PM

    Please check this guide on how to properly apply the font via CSS: https://www.jotform.com/help/100-How-to-Use-Google-Fonts-in-your-Form

    For example:

    @font-face {

        font-family: myFirstFont;

        src: url(http://www.yoursite.com/fonts/coolfont_bold.woff);

        font-weight: bold;

    }

    .form-all{

    font-family: 'myFirstFont', sans-serif;

    }

    So use single quotes when you want to apply the font, and I noticed, at least in your code above, that you defined your phone three times:

    @font-face {

        font-family : MuseoSlab;

        src : url("http://www.koen2000.be/webfont/MuseoSlab-500.ttf");

    }

     

    @font-face {

        font-family : MuseoSlab;

        src : url("http://www.koen2000.be/webfont/MuseoSlab-500.otf");

    }

     

    @font-face {

        font-family : MuseoSlab;

        src : url('http://www.koen2000.be/webfont/MuseoSlab-500.eot') format('embedded-opentype');

        font-weight : normal;

        font-style : normal;

    }

    Please check and let us know how it worked for you.

    Thank you!

  • Profile Image

    Answered by koen2000 on April 04, 2017 at 04:16 AM

    I've done the changes, as i've done them already a few times before, but stil not showing the right font. 

     

    There is something that is overruling the form.all lines. 

    on my website i've placed the same code, and there it is working perfectly! 

    check www.koen2000.be 

     

     

  • Profile Image
    JotForm Support

    Answered by Charlie on April 04, 2017 at 06:19 AM

    Upon checking your form and testing it in my end, it seems like the font can't be loaded on JotForm due to some security or restrictions. 

     

    Here are some possible reasons:

    1. The link is not in the same domain of JotForm. Here's a link to it: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy. The can't easily apply resources like fonts from different origins as a means of securing both connections.

    2. Your website link is running on HTTP and not HTTPS (SSL), the website or the form itself is on HTTPS protocol, so it is necessary for other resources to be loaded on the same protocol. 

     

    I also suggest checking the browser compatibility of the font type that you are using on this link: https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

    Now I suggest using Google Fonts instead as it does not have the same restriction because Google Font was designed to be publicly used in different websites: https://fonts.google.com/

    If you still want to use your own fonts, then perhaps embedding the form using the full source code and apply the CSS directly on the <head> tags would be more suitable for your case. Here's a guide on how to get your full source code: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    I hope that helps. 

  • Profile Image

    Answered by koen2000 on April 04, 2017 at 08:47 AM

    I've changed my hosting to SSL, so font is now accessible on https://www.koen2000.be/webfont/MuseoSlab-500.woff but still the editor won't load is. 

     

    but I've copied the source code and put in a html file and that is working. 

     

    so I can continue, not the normal way, but it works.. 

     

    Thanks! 

  • Profile Image
    JotForm Support

    Answered by ashwin_d on April 04, 2017 at 11:31 AM

    Hello koen2000,

    I did clone your form in my account but I am also having difficulty in applying the font but I am glad to know that you were able to find a workaround.

    Thank you!