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

    Need assistance setting up Google fonts on my form

    Asked by tom992 on April 01, 2015 at 05:35 AM
    Need help please! Trying for hours now....Julius Sans OneGot this from google@font-face { font-family: 'Julius Sans One'; font-style: normal; font-weight: 400; src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url(http://fonts.gstatic.com/s/juliussansone/v4/iU65JP9acQHPDLkdalCF7iJccsb45t3MJKcv5BJtrIs.woff2) format('woff2'), url(http://fonts.gstatic.com/s/juliussansone/v4/iU65JP9acQHPDLkdalCF7q3fkYX5z1QtDUdIWoaaD_k.woff) format('woff');}And add this: .form-all *{font-family: 'Julius Sans One', cursive;}I'm not sure if "cursive" is ok, I tried normal, regular... too. No luck. Please..... Thanks

    This is a re-post of a comment on How to Use Google Fonts in your Form

    style font format add Google font form font
  • Profile Image

    Answered by Ben on April 01, 2015 at 11:17 AM

    The code above seems to be OK, unless you are adding it as google@font-face.

    I would suggest adding the code like this:

    @font-face {
       font-family: 'Julius Sans One'; font-style: normal; font-weight: 400; src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url(http://fonts.gstatic.com/s/juliussansone/v4/iU65JP9acQHPDLkdalCF7iJccsb45t3MJKcv5BJtrIs.woff2) format('woff2'), url(http://fonts.gstatic.com/s/juliussansone/v4/iU65JP9acQHPDLkdalCF7q3fkYX5z1QtDUdIWoaaD_k.woff) format('woff');
    }
    .form-all *{ font-family: 'Julius Sans One', cursive; }

    also, do add it at the very bottom of the form custom CSS field:

    Inject Custom CSS Codes

    Do let us know how it goes.

  • Profile Image

    Answered by tom992 on April 01, 2015 at 11:51 AM

    I copy & paste your code. Now I have a comic font :-(

    If this is out of your regular support, I'm willing to pay for your service to get this done.

    Thanks

  • Profile Image

    Answered by tom992 on April 01, 2015 at 12:38 PM

    Ok, found the problem. The font will show up on my website, but nor correctly on your form site. :-)

  • Profile Image

    Answered by Ben on April 01, 2015 at 01:31 PM

    Great, thank you for updating us :)

    The reason why it might not work for you is because you are using general CSS rule (the star):

    .form-all *

    so if there is some more specific rule (and there are in our Form Builder) it might not show the font, but as you have mentioned it will work nicely in your website.

    I always suggest using the Preview option when making any changes as that will show you the best how the form will look in the end or to embed it on a page on your own website and refresh it when you make some change.

    Do let us know if you have any further questions and we would be happy to assist.