Why my custom font is not applying in the form?

  • koen2000
    Asked on April 3, 2017 at 6: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! 

     

  • Sven
    Replied on April 3, 2017 at 9:55 AM

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

    Why my custom font is not applying in the form? Image 1 Screenshot 20

     

    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.

  • koen2000
    Replied on April 3, 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: 

    Why my custom font is not applying in the form? Image 1 Screenshot 20

     

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

     

     

  • Nik_C
    Replied on April 3, 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!

  • koen2000
    Replied on April 4, 2017 at 4: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. 

    Why my custom font is not applying in the form? Image 1 Screenshot 20

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

    check www.koen2000.be 

     

     

  • Charlie
    Replied on April 4, 2017 at 6: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. 

    Why my custom font is not applying in the form? Image 1 Screenshot 20

     

    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. 

  • koen2000
    Replied on April 4, 2017 at 8: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! 

  • Ashwin JotForm Support
    Replied on April 4, 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!