Using a custom font

  • marketing905
    Asked on September 1, 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

  • Chriistian Jotform Support
    Replied on September 1, 2016 at 1: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?

    Using a custom font Image 1 Screenshot 20

     

    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.

  • marketing905
    Replied on September 6, 2016 at 4: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

  • Chriistian Jotform Support
    Replied on September 6, 2016 at 5: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.

    Using a custom font Image 1 Screenshot 20

     

     

    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.