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

    How can I use webfonts with Jotform

    Asked by Benjamin Thompson on October 02, 2014 at 02:06 AM

    I am using Jotform for a website I am currently building for a client.

    The rest of the website uses Proxima Nova and I'm not sure how to get the form to match.

    Please also note, the url I've given here is not the final address the form will be at. (It will be moved to new hosting which is not set up yet).

    Page URL:
    http://www.marketingandbranding.com.au/mdfp20141002d/contact.html

    JotForm webfonts hosting fonts font style google fonts
  • Profile Image
    JotForm Support

    Answered by jonathan on October 02, 2014 at 04:41 AM

    Hi Ben,

    Please check this user guide  -Beautify-your-Form-with-Google-Web-Fonts

    You can use the source website of the Proxima Nova font (since it is not available in Google)

    Please take note that you can still follow the user guide on how to add the font style. You will just have to indicate the source URL so it can be imported to your jotform.

    Hope this help. Inform us if you need further assistance.

    Thanks.

     

     

  • Profile Image

    Answered by crystaloftruth on October 02, 2014 at 08:41 PM

    Can't get it to work, although it seems to be using a different font than before it's not the one i'm pointing it at (I think it's using a default font because the css didn't work)

    This is the custom css I'm using...

    @font-face {
    font-family: 'proxima_nova_rgregular';
    src: local('proxima_nova_rgregular'),
    local('proxima_nova_rgregular'),
    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
    }
    .form-line {
    padding:5px;
    margin: 0 0 !important;
    }
    .form-label-top{
    display:none;
    }
    .form-all {
    padding-top: 0;
    margin-top: 0;
    font-family: 'proxima_nova_rgregular';
    }
    .form-sub-label {
    display:none;
    }

     

    Some of this css isn't related to the font but thought I'd show it all to you in case there is some sort of conflict.

    The page the form is on is here:

    http://www.marketingandbranding.com.au/mdfp20141003a/contact.html

     

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 03, 2014 at 03:43 AM

    Hi,

    First, there's something lacking with your font-face CSS. Please use the following.

    @font-face {

    font-family: 'proxima_nova_rgregular';

    src: url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.eot');

    src: url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),

    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.woff') format('woff'),

    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.ttf') format('truetype'),

    url('http://www.marketingandbranding.com.au/mdfp20141003a/fonts/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');

    font-weight: normal;

    font-style: normal;}

    .form-all *{font-family:'proxima_nova_rgregular' !important;}

    For your information, this font will not work on the form if you are not going to embed your form using your form source code. Here's how to get your form source code, https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form.

    This is what you see on your browser console if you will embed Jotform with the default script embed not with form source code.

    The reason why is due to CORS policy (Cross-Origin Resource Sharing). The form is embedded on your server not within Jotform so you have to configure your server to allow CORS method, unless you are going to embed Jotform using form source code.

    Hope this information helps. Thanks!