How to Use Google Fonts in your Form

Last Update: September 21, 2016

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 (January 08, 2013 at 07:58 PM)

Will this work with fonts.com?

View Answer


   
tekkon (March 03, 2013 at 10:35 PM)

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


   
Anvita (July 18, 2013 at 12:53 PM)

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


   
Sam (December 16, 2013 at 04:39 PM)

You are a legend, thanks for this


   
birdwalkpress (January 17, 2014 at 04:15 PM)

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?

View Answer


   
jarmerson (January 21, 2014 at 07:17 PM)

AWESOME - thanks!!!


   
chrisjaeger (February 01, 2014 at 02:16 PM)

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;}

View Answer


   
chrisjaeger (February 01, 2014 at 02:37 PM)

I figured this out. Was doing something wrong.


   
adriaanse (February 01, 2014 at 04:59 PM)

Awesome. Worked well.


   
ics.vernna (March 31, 2014 at 10:28 PM)

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!

View Answer


   
ics.vernna (March 31, 2014 at 10:31 PM)

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

View Answer


   
Chelena (May 04, 2014 at 03:54 PM)

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.

View Answer


   
Luigi (June 29, 2014 at 08:40 PM)

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?

View Answer


   
rachelconnors (August 13, 2014 at 02:32 PM)

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';}

View Answer


   
Jo (September 11, 2014 at 01:27 PM)

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');
}

View Answer


   
mpt512 (October 09, 2014 at 11:02 PM)

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.

View Answer


   
art_crate (January 13, 2015 at 02:00 AM)

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;
}

View Answer


   
tom992 (March 31, 2015 at 08:20 PM)

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

View Answer


   
EltonCris (April 05, 2015 at 10:36 PM)

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 (April 08, 2015 at 10:18 AM)

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';

}

View Answer


   
Sanjay Pawar (April 17, 2015 at 02:19 AM)

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.

View Answer


   
5050maxcharity (August 11, 2015 at 01:37 PM)

Hello,

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

View Answer


   
Tess (July 17, 2016 at 10:37 AM)

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

View Answer


Send Comment