How to Use Google Fonts and Custom Fonts in Your Form

November 26, 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

a. Search and select a font.

b. Choose the styles you wish to use.

c. Select “@import” in the Use on the web section.

d. Copy the provided @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.

3. To apply the imported fonts in your form, simply use the font-family property.

4. You can use the following code:


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.

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:


@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:

Contact Jotform Support:

Send Comment:

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