User Guide

 

How to Use Google Fonts in your Form

How to Use Google Fonts in your Form

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. 

Send Comment

26 Comments...

  • MxTraining

    I got this to work except for one thing. While designing the form everything is in your default font, looks like Helvetica. When I click on "preview form" it applies my font. This is good. But it would be better to design using the imported font. It's hard to design properly if not using the wanted font, particularly if the desired font is fixed-width (like Courier) but I have to design using variable width font.
    Do you have a solution?
    Thanks in Advance.

  • ragandbone

    My form is here:
    https://form.jotform.com/ragandbone/booking-inquiry
    but my font isn't showing. What am i missing?

    Here's my code:

    @font-face {

    font-family: Marr Sans Web;

    src: url(http://www.ragandbone.ca/webfonts/MarrSans-Regular-Web._CT/MarrSans-Regular-Web.woff);

    font-weight: 400;

    }

    .form-all *{

    font-family: 'Marr Sans Web', sans-serif;

    }

  • KILLSPENCERINC1

    Hello, having some issues with the font not working in Safari. I am importing two fonts stored on Shopify:


    @font-face {
    font-family : Avenir;
    src : url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.woff')
    format('eot'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.eot')
    format('woff'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.woff')
    format('ttf'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/arnhemfine-normalitalic-webfont.ttf');
    }

    @font-face {
    font-family : United;
    src : url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.woff')
    format('eot'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.eot')
    format('woff'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.woff')
    format('ttf'),url('https://cdn.shopify.com/s/files/1/1847/6639/t/6/assets/UnitedSansReg-Light.ttf');
    }

    How can I get this to also work for Safari?

  • Tess

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

  • 5050maxcharity

    Hello,

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

  • 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.

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

    }

  • 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!

  • 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

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

  • 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.

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

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

  • 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?

  • 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.

  • ics.vernna

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

  • 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!

  • adriaanse

    Awesome. Worked well.

  • chrisjaeger

    I figured this out. Was doing something wrong.

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

  • jarmerson

    AWESOME - thanks!!!

  • 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?

  • Sam

    You are a legend, thanks for this

  • Anvita

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

  • tekkon

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

  • jeffsingerphoto

    Will this work with fonts.com?