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

    Google Fonts

    Asked by holmster on January 23, 2014 at 09:58 AM

    I am attempting to change the font for the headers on our form for a mother-daughter tea event.

    I have selected the Mystery Quest font from google fonts and followed the guide given here to inject CSS for the font.

     

    After I have inserted the CSS for the font, and the the .form-all, I cannot get the font to change. Any assistance would be greatly appreciated.

    Page URL:
    http://jotformpro.com/form/40165658350959

    JotForm inject CSS font selected
  • Profile Image
    JotForm Support

    Answered by EltonCris on January 23, 2014 at 10:36 AM

    Hi,

    I think it should be, font-family: 'Mystery Quest', cursive; NOT font-family: 'Mystery Quest', normal;

    So the code should be:

    .form-all{

    font-family: 'Mystery Quest', cursive;

    }

    You can also add form-html class for the text on the html field to carry the new font style. You use the final code below:

    .form-all, .form-html{

    font-family: 'Mystery Quest', cursive;

    }

    -----

    For the header text field, you have to removed the font-family on its style attribute first before the new font could take effect. You can removed this on the form builder when you click the HTML icon on the property toolbar. Here's a visual guide:

    Let us know if we can be of further assistance.

    Regards!

  • Profile Image

    Answered by holmster on January 23, 2014 at 10:51 AM

    Thanks for your response, EltonChris.

    Those changes  switched the font style, but not to what I was expecting.

    I deleted the font family segment and changed n ormal to cursive as you suggested, but it changed it to a different font than the Mystery Quest font I was going for.

    I tried reinjecting the css for the google font, thinking I may have deleted something I wasn't supposed to, but had the same results.

  • Profile Image

    Answered by EliezerN on January 23, 2014 at 11:33 AM

    Hi,

    I checked your form and found that it has been changed to the Mystery Quest font as you wish including the header:

    Are you not getting this results? Please, check again and inform us if you still need assistance with this inquiry.

    Thanks

  • Profile Image

    Answered by holmster on January 23, 2014 at 12:21 PM

    EliezerN,

    The first time I looked, no, it wasn't showing the correct font. Hower it seems to be working now. One thing I did note is that the font doesn't show up when building the form, only when viewing the form from its URL.

    In any case, I am good now, thanks for your help!

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 23, 2014 at 12:35 PM

    Glad to hear it.

    Cheers!