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

    Add the font museo on form

    Asked by JR86 on December 12, 2016 at 10:28 PM

    Hello

    I'm trying to insert the font museo using the css command:

    .form-all * {

    font-family: museo;

    }

    However, to no avail. Jotform does not recognize this font and I have tested with more complex fonts and they worked! Help me, I really need this font.

  • Profile Image
    JotForm Support

    Answered by Jim_R on December 13, 2016 at 03:01 AM

    If you need to use a specific font for your form, you'd have to upload/host the font file somewhere, then declare the font using CSS for you to use it on your form.

    Related source: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

  • Profile Image

    Answered by JR86 on December 13, 2016 at 08:26 AM

     

    After you have hosted the file, what is the exact CSS code for the font to work?

    Would it be so?

    @ Font-face {     

    Font-family: museo;     

    Src: url (sansation_light.woff);

    }

    And in Src, give me an example please of how the url has to be displayed. In my case, I stayed in Google Drive.

  • Profile Image
    JotForm Support

    Answered by Chriistian on December 13, 2016 at 08:55 AM

    Hi there,

    Since the font is not hosted in JotForm, you need to import it before your styles as shown below.

     

    @import url(//fonts.googleapis.com/css?family=Open+Sans);

     

    .form-all * {

         font-family: 'Open Sans';

    }

     

    The above example is importing font from Google. I am assuming you are hosting the font somewhere else so you need to provide the correct URL in the import statement.

    Let us know if you need further assistance.

     

  • Profile Image

    Answered by JR86 on December 13, 2016 at 11:05 AM

    After researching a bit on the subject, I managed to get in this line of CSS code, but it still does not work. Where is the mistake, please?

    @ Font-face {     

    Font-family: 'museo300';

    Src: url ('museo_300_regular-webfont.woff2') format ('woff2'),         

    Url ('museo_300_regular-webfont.woff') format ('woff');    

    Font-weight: normal;     

    Font-style: normal;}

    .form-all *

    {Font-family: museo300;

    }

  • Profile Image
    JotForm Support

    Answered by KadeJM on December 13, 2016 at 12:50 PM

    Unfortunately, importing fonts can be a little tricky sometimes especially if it's one that's not fully available for usage through google fonts though it is possible.

    What is the source url of your font? Do you have it hosted somewhere?

     

    I'd recommend trying out something like this instead:

    @font-face {

        font-family: museo;

        src: url(http://www.yoursite.com/fonts/museo_300.woff); /* put the full url of the hosted font */

        font-weight: normal;

        font-style: normal;

    }

    .form-all{

    font-family: 'museo', sans-serif;

    }

     

     

    This is mentioned at the very bottom of our google font's guide.

  • Profile Image

    Answered by JR86 on December 13, 2016 at 01:35 PM

     

    I tried and could not. But to help me the best way, I send the link of the site:

    http://sodiedoces.com.br/

    And the link where they are hosted:

    http://sodiedoces.com.br/app/webroot/fonts/

    I believe it is now possible to send me the CSS code working perfectly! Please help me!

    Thanks.

  • Profile Image
    JotForm Support

    Answered by Nik_C on December 13, 2016 at 03:49 PM

    According to what I could find online this is the CSS code to apply your font: 

    @font-face {

    font-family: Museo;

    font-weight: bold;

    src: url("http://sodiedoces.com.br/app/webroot/fonts/Museo100-Regular.otf") format("opentype");

    }

    .form-all { 

    font-family: Museo;

    }

  • Profile Image
    JotForm Support

    Answered by Nik_C on December 13, 2016 at 03:54 PM

    I'm sorry, I posted the answer, but didn't finish my reply. 

    Please try copying and pasting the above code in your Custom CSS field.

    Let us know if it is working for you.

    Thank you!

  • Profile Image

    Answered by JR86 on December 13, 2016 at 08:24 PM
    I'm sorry, but it did not work ... Please test the code by creating a form and then let me know that it worked! I trust you Jotform Support
  • Profile Image
    JotForm Support

    Answered by Jim_R on December 13, 2016 at 09:51 PM

    Hi again, I did try on a test form and failed to make it work. I'm currently fiddling around other solutions and will get back to you as soon as I have something (good or bad) :)

  • Profile Image
    JotForm Support

    Answered by Jim_R on December 14, 2016 at 02:03 AM

    I'm afraid I only managed to make it work using the Full Source Code of the form. However, I would also suggest an alternative so you have another option:

    1. EASY WAY: Just use a readily available Google Font variant that closely matches the look and feel of Museo. I found the Sanchez font really similar to Museo. If you'll go this route, then your CSS code would look something like this:

    @import url('https://fonts.googleapis.com/css?family=Sanchez');

    .form-all * {

       font-family: Sanchez;

    }

    And that's basically it!

    RESULT: https://form.jotform.com/63478136905968 (Sanchez font)

    2. HARD WAY: You need to copy your form's Full Source code > embed it on your page/website > upload your font file to the same directory where you will deploy the full source code > then declare your CSS codes on your website's source code directly.

    RESULT: https://shots.jotform.com/jimr/~pages/1009791/1009791.html (Museo font)

    NOTE that you may need to relay these info to your designer/developer and have them do this for you.

    IMHO, going with the easy way will be a better choice. You won't need to have your designer/developer do these, and there's not much of a difference to the appearance of the 2 fonts either way.