How to Use Google Fonts and Custom Fonts in Your Form

September 15, 2021

Aside from the built-in fonts, JotForm also supports At-rules (e.g. @importand, @font-face). You can use these to import your custom fonts from Google Fonts or fonts hosted on your server.

Import Fonts From Google Fonts

  1. Get your Google Fonts import code at https://fonts.google.com/
    1. Search and select a font.
      Google Fonts - Search and Select

      Google Fonts - Search and Select

    2. Choose the styles you wish to use.
    3. Select “@import” in the Use on the web section.
    4. Copy the provided @import code.
      Google Fonts - Import Code

      Google Fonts - Import Code

  2. Go back to the Form Designer under the Styles tab and make sure to paste the import code on top of all the existing CSS codes you may have.
    Inject Custom CSS

    Inject Custom CSS

  3. To apply the imported fonts in your form, simply use the font-family property.
  4. You can use the following code:

    .form-all*{
        font-family:'Raleway',sans-serif;
    }

    Replace Raleway with your Google Fonts name. Or, you can go back to Google Fonts where you have copied your import code. You’ll see the font-family property with the font name in it.

    Font Family

    Font Family

    You can copy it and paste it on the .form-all class.

Use Custom Fonts Hosted From Your Server

You can use the following sample code and paste it on the Form Designer. 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://transfonter.org/.

Example:

@font-face {
     font-family:myFirstFont;
     src:url(https://www.yoursite.comfontscoolfont_bold.woff);
     font-weight:bold;
}
.form-all*{
     font-family:'myFirstFont',sans-serif;
}

Font Face

Font Face

If you have questions, post them below.

Was this guide helpful?
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:

Support Forum: https://www.jotform.com/answers/

Contact JotForm Support: https://www.jotform.com/contact/

Send Comment:

JotForm Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comments: