Custom CSS: getting a cross-origin error in the form when using a custom font face

  • koen2000
    Asked on August 2, 2017 at 8:57 AM

    hi, 

     

    when checking the lay-out I get this message in chrome console about my font: 

    Access to Font at 'https://forms.joker.be/webfont/MuseoSlab-500.woff' from origin 'https://form.jotformeu.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://form.jotformeu.com' is therefore not allowed access. 

    I use this line to import the font: 

    @font-face {

        font-family : MuseoSlab;

        src : url('https://forms.joker.be/webfont/MuseoSlab-500.woff');

    }

     

    How can I bypass this error since my chosen font is not applied.. 

     

    Thanks! 

     

  • Welvin Support Team Lead
    Replied on August 2, 2017 at 12:28 PM

    It's a security error. I'm sorry, but you cannot bypass this error in the form. Let me just create a ticket about this to our developers. We can't promise any timeframe for this, but if there are updates, you should know it via this thread.

    For the meantime, you may consider using a different font. We have Google Fonts in the form designer tab.

    Custom CSS: getting a cross origin error in the form when using a custom font face Image 1 Screenshot 20

  • Rose
    Replied on August 4, 2017 at 3:51 AM

    I was informed by the developer who was assigned to this ticket. The problem is not related to JotForm actually. The server kept your file is configured in such a way that not accepting Cross-Origin requests. So, if you configure your server as accepting Cross-Origin requests, you will be able to use any font you want to use.

    If you have more questions, please feel free to contact us. We would be pleased to assist you.