User Guide

How to Use Google Fonts in your Form

Last Update: June 6, 2017

Aside from the built in fontsJotForm also supports "@" at-rules e.g. @import and @font-face. You can use these codes to import your custom fonts from Google Fonts or fonts hosted on your server.

A. Import fonts from Google Web Fonts to your form using the @import code provided by Google.

1. Get your Google Web Fonts import code at http://www.google.com/webfonts

  a. Search a font
  b. Click Add to Collection button
  c. Then click Use button

  d. Copy the provided @import code

2. Go back to the Form Designer under CSS Tab and make sure to paste the import code ON TOP of all the existing CSS codes you may have.

3. To apply the imported fonts in your form, simply use the font-family property on .form-all class as seen on the above screenshot. You can also use the following code.

.form-all *{

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

}

Replacing Raleway with your Google Fonts name. Or you can go back to Google Fonts where you have copied your import code. On step 4 Integrate CSS (see image below), you'll see the font-family property with the font name in it. You can copy it and paste it on the .form-all class.


B. Use custom fonts hosted from your server using @font-face rule.

1. You can use the following sample code and paste it on the Form Designer under CSS tab. After that, replace the required values e.g. the font-family name and the source of the font. Or for browser compatibility, you can generate your @font-face codes using this tool https://www.web-font-generator.com/

Example:

@font-face {

    font-family: myFirstFont;

    src: url(http://www.yoursite.com/fonts/coolfont_bold.woff);

    font-weight: bold;

}

.form-all *{

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

}

If you have questions, post it below. 

23 Comments...

  • jeffsingerphoto

    Will this work with fonts.com?

  • tekkon

    Thanks for this. It worked perfectly with Source Sans Pro.

  • Anvita

    Its giving following error
    missing ;before statement (line 2, file "CODE")

  • Sam

    You are a legend, thanks for this

  • birdwalkpress

    I can't get this to work! No errors, the code mirrors the above example, but I can't for the life of me get my Google Font to show as an option for Font in the Form Style page. What am I doing wrong?

  • jarmerson

    AWESOME - thanks!!!

  • chrisjaeger

    Same problem as birdwalkpress. At http://bookmoreweddings.com/marketing-to-brides/.

    Code is as above:

    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v7/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
    }/*Use the font name to .form-all class*/.form-all{font-family: 'Open Sans', cursive;}

  • chrisjaeger

    I figured this out. Was doing something wrong.

  • adriaanse

    Awesome. Worked well.

  • ics.vernna

    This worked, however, the font I used is very small. How do I change the font sizes just like the example here (Lobster) wherein the heading, subheading, and the body areas have different font sizes?

    Thanks for your help in advance!

  • ics.vernna

    Also, I just realized that the heading's font did not change.

  • Chelena

    Hi, I would like to use "font awesome" but that is not available in Google fonts. Is there another way of doing it? Thank you.

  • Luigi

    I can not seem to implement the font Alegreya Sans SC. I do all the procedures you listed but the font is not added. where am I wrong? you could write the CSS text to be replaced?

  • rachelconnors

    Hi! I am having a problem making this work too -- here is the code I used. Any advice is very appreciated!

    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    src: local('Montserrat-Regular'), url(http://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'), url(http://fonts.gstatic.com/s/montserrat/v5/zhcz-_WihjSQC0oHJ9TCYL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
    }
    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat-Bold'), url(http://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcmaVI6zN22yiurzcBKxPjFE.woff2) format('woff2'), url(http://fonts.gstatic.com/s/montserrat/v5/IQHow_FEYlDC4Gzy_m8fcnbFhgvWbfSbdVg11QabG8w.woff) format('woff');
    }.form-all{font-family: 'Montserrat';}

  • Jo

    I have managed to make the font the same for the entire form except the line of text I have added at the bottom of my form is there another tag I should add for that?

    Currently:

    .form all, .form-header, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea {
    font-family: 'Carrois Gothic';
    font-style: normal;
    font-weight: 400;
    src: local('Carrois Gothic'), local('CarroisGothic-Regular'), url(http://fonts.gstatic.com/s/carroisgothic/v4/GCgb7bssGpwp7V5ynxmWy2IHn70NeZKJ0uStDo7Dza8.woff) format('woff');
    }

  • mpt512

    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.

  • art_crate

    Can't get Ubuntu Light 300 to work. Any help???

    This is the code I have been trying:

    @font-face {
    font-family: ‘Ubuntu’, Light 300;
    font-style: normal;
    font-weight: 400;
    src: local(‘Ubuntu’), local(‘Ubuntu’), url(http://fonts.googleapis.com/css?family=Ubuntu:300) format('woff');
    }
    .form-all, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea{
    font-family: ‘Ubuntu’, Light 300;
    font-size:16px;
    font-weight: normal;
    }

  • tom992

    Need help please! Trying for hours now....

    Julius Sans One

    Got 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

  • EltonCris

    Hi Guys, we have updated the guide. There should be no more browser compatibility issues using Google Fonts for as long as the browser supports @import code. Cheers!

  • Silkndiamonds

    I've put this in as directed in Step 2 and my form isn't showing the font.


    @import url(http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy);

    .form-all{

    font-family: 'Sorts+Mill+Goudy';

    }

  • Sanjay Pawar

    I want to use devanagri hindi font in my web applicaition. When I type Sanjay it should show dropdownlist in Hindi. I will save this in sql database. Then again how to retrieve it from sql database and print on screen in hindi.
    How to do it? Pls help. Im not getting any help source.

  • 5050maxcharity

    Hello,

    My website uses Helvetica Neue Light, purchased and stored on my computer. Is there anyway to incorporate that into my form?

  • Tess

    I want to use "Book Antiqua" how do I do this?

Send Comment