JotForm User Guide / How to Create Better Forms /

How to Use Google Fonts and Custom Fonts in your Form

How to Use Google Fonts and Custom 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

  a. Search a font
  b. Click + to add it to the Collection
  c. Then click collapse button on the bottom right of your screen

  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:

 4. On .form-all class. 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


@font-face {

    font-family: myFirstFont;

    src: url(;

    font-weight: bold;


.form-all *{

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


If you have questions, post it below. 

Contact Support:
Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:
Contact JotForm Support:

Send Comment


  • e.murray

    I have followed each of the steps, but the font doesn't seem to be applying still:

    @import url(',wght@0,500;1,300&display=swap');

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

    Any ideas where I've gone wrong?

  • Franzen111

    Good evening.

    I would like to import and use the google font Montserrat as my header font, while keeping the rest of the text Open Sans, which is already an option within jotforms.

    I admittedly have very little experience with CSS, jotforms or google fonts, but would be grateful if someone had the time to walk me through how I might accomplish this.

    Thank you.


  • WalnutCreekTeeth

    This is not working for us. The page code/CSS show the font is still set at Merriweather. We are trying to use Libre Baskerville.

  • Zonamobile

    Thanks you, work for me

  • Réka Wilson

    I have attempted to inject our own font with @import and @font-face from our web fonts project, with no avail.
    Do you have any advice?

  • bhaslitt

    I'm wondering, has this option been removed? I cannot find the CSS tab, and found a different(Older) support post saying it has been removed.

    We would really like to use the Google fonts we have chosen for our website- is there another way to do this?

  • 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:
    but my font isn't showing. What am i missing?

    Here's my code:

    @font-face {

    font-family: Marr Sans Web;

    src: url(;

    font-weight: 400;


    .form-all *{

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



    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('')

    @font-face {
    font-family : United;
    src : url('')

    How can I get this to also work for Safari?

  • Tess

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

  • 5050maxcharity


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


    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( format('woff2'), url( 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( 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-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( 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?


    .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( 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( format('woff2'), url( format('woff');
    @font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    src: local('Montserrat-Bold'), url( format('woff2'), url( 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.

  • adriaanse

    Awesome. Worked well.

  • chrisjaeger

    I figured this out. Was doing something wrong.

  • chrisjaeger

    Same problem as birdwalkpress. At

    Code is as above:

    @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans'), local('OpenSans'), url( 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