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

    Using a custom font

    Asked by marketing905 on September 01, 2016 at 11:21 AM

    Hi,
    I'm looking to match the font used within our website, unfortunately it's not listed as a google font so instead I've injected the following CSS into my form.

    @font-face {

        font-family : 'truman';

        src : url("http://www.yewdale.co.uk/fonts/FSTrumanWeb-Regular.eot");

        src : url("http://www.yewdale.co.uk/fonts/FSTrumanWeb-Regular.eot?#iefix") format("embedded-opentype"), url("http://www.yewdale.co.uk/fonts/FSTrumanWeb-Regular.woff") format("woff");

        font-weight : normal;

        font-style : normal;

    }

    When I try to select the font "truman" I can't see it listed within the fonts available.. Am I missing something?

    Many thanks in advance.

    Regards,

    Richard

    font custom font a style format www
  • Profile Image
    JotForm Support

    Answered by Chriistian on September 01, 2016 at 01:09 PM

    When you said you cannot see the font listed within the fonts available, are you referring to the Font Options in Designer of your form?

     

    Added custom fonts are not automatically added to the Font Options in Designer but if you have added the CSS code you provided in your form above, you can still use the font by injecting custom CSS code. For example,

    .form-all {

        font-family: 'truman' !important;

    }

     

    Do let us know if you need further assistance.
    Regards.

  • Profile Image

    Answered by marketing905 on September 06, 2016 at 04:49 AM

    Hi Chriistian,

    Many thanks for your help,

    I have added the code via the injecting custom css code element, but can't see how I associate that code to the form.

    https://form.jotformeu.com/62443803345352

    Within the code I can see the injected css but it how do I change the code within the jotform control panel?

    .form-all is set to 'Arial' but I need to change it to 'truman'.

    Many thanks in advance,

    Regards,

     

     

    Richard

  • Profile Image
    JotForm Support

    Answered by Chriistian on September 06, 2016 at 05:20 AM

    Your code seems to be setup correctly. However, after further checking, I noticed that Jotform is not being allowed to access the font file, which is why it is not being displayed on your form.

    Error message:

    Font from origin 'http://www.yewdale.co.uk' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.jotform.com' is therefore not allowed access.

     

     

    You will need to allow Jotform to access the files on your site so the font files will be loaded properly on your form. Here are a couple of threads that may help you in allowing jotform to access your files:

    http://webmasters.stackexchange.com/questions/71630/font-blocked-from-loading-by-cross-origin-resource-sharing-policy-no-access-co 

    http://stackoverflow.com/questions/25577981/font-from-origin-has-been-blocked-from-loading-by-cross-origin-resource-sharing 

    Regards.