Using a custom font

  • Profile Image
    marketing905
    Asked 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

  • Profile Image
    Chriistian
    Answered 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
    marketing905
    Answered 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
    Chriistian
    Answered 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.