How to apply Google fonts on my form

  • Profile Image
    mpt512
    Asked on October 10, 2014 at 09:56 AM

    I must be retarded because I cannot get this to work, any chance you all could a look at my code and see what the problem is?

    @font-face {

    font-family: 'Jura';

    font-style: normal;

    font-weight: 600;

    src: local('Jura DemiBold'), local('Jura-DemiBold'), url(http://fonts.gstatic.com/s/jura/v7/jylivVcL1U8Es-mK45GQHvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');

    }

    .form-all, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea{font-family: 'Jura', normal;}

    Also, is this supposed to appear in the drop down box as a selectable font or is it just suppposed to be there whenever I type? I'm really confused right now.



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

  • Profile Image
    Jan
    Answered on October 10, 2014 at 10:24 AM

    Hi mpt512,

    Can you share the URL of your form? 

    I can see that the CSS code that you posted are correct. Please be reminded that the font will be applied once you click "Preview" or opening the actual form in a new tab or window. It will not appear on the editor. Please check the screenshot below.

    Hope this helps. Thank you.

  • Profile Image
    Jan
    Answered on October 10, 2014 at 10:33 AM

    Just to answer this question.

    Is this supposed to appear in the drop down box as a selectable font or is it just supposed to be there whenever I type?

    Yes it will be applied on the elements that you wanted. 

    .form-all, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea{font-family: 'Jura', normal;}

    On the css code above, it is stated that the buttons, text-area, inputs and select should use the font-family: Jura.

     

    Hope this helps. Thank you.

  • Profile Image
    mpt512
    Answered on October 10, 2014 at 08:08 PM

    Ok, so it works in the preview and it works when I post a direct link, like the following: http://form.jotform.us/form/42827881473162

     

    But when I embed it into a lightbox for squarespace it popups and everything is fine, but the font reverts back to some comic sans crap, what do I do?
  • Profile Image
    Jan
    Answered on October 10, 2014 at 09:29 PM

    I created a separate thread for the other issue. http://www.jotform.com/answers/441558

    We will reply to that thread. Thank you for understanding.