Why my custom font is not applying in the form?

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! 

 

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.

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.. 

 

 

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!

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 

 

 

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. 

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! 

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!