Add the font museo on form

  • JR86
    Asked 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.

  • Support_Management Jotform Support
    Replied on December 13, 2016 at 3: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

  • JR86
    Replied on December 13, 2016 at 8: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.

  • Chriistian Jotform Support
    Replied on December 13, 2016 at 8: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.

     

  • JR86
    Replied 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;

    }

  • KadeJM
    Replied 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.

  • JR86
    Replied on December 13, 2016 at 1: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.

  • Nik_C
    Replied on December 13, 2016 at 3: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;

    }

  • Nik_C
    Replied on December 13, 2016 at 3: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!

  • JR86
    Replied on December 13, 2016 at 8: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
  • Support_Management Jotform Support
    Replied on December 13, 2016 at 9: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) :)

  • Support_Management Jotform Support
    Replied on December 14, 2016 at 2: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.