How to Use Google Fonts and Custom Fonts in Jotform

April 14, 2024

Aside from built-in fonts, Jotform also supports CSS at-rules like @import and @font-face. You can use these to apply custom fonts from Google Fonts or your server to your forms.

Youtube Embed Poster: o5j8JpMwbCA

Getting Your Google Fonts Import Code

To generate your Google Fonts CSS import code

  1. Open Google Fonts and search for a font.
  2. Choose a font from the results.
Steps to search and select a font in Google Fonts
  1. Scroll down to Styles and choose your desired font styles.
An arrow pointing to the "regular" font style in Google Fonts
  1. Select the grid icon in the upper-right corner to open the Selected family pane.
  2. In the right pane, select @import under Use on the web.
  3. Copy the code inside the style tag.
A screenshot of Google Fonts with highlights to access the import code in the Selected family pane

Also, take note of the font-family declaration under CSS rules to specify families. Keep on reading to learn how to import the font into your form.

Importing Google Fonts Into Your Form

To use Google Fonts on your form

  1. In the Form Builder, select the paint roller icon in the upper-right corner.
A screenshot of Form Builder with an arrow pointing to the paint roller icon -- to open Form Designer
  1. In the right panel, go to Styles at the top.
A screenshot of Form Builder with an arrow pointing to the Styles tab in the Form Designer pane
  1. Scroll down to Inject Custom CSS and paste your Google Fonts import code in Line 1.
The Google Font import CSS rule in Form Builder's Form Designer

Note

The @import rule must be declared before any other rules. Make sure to paste the import code on top of all the existing CSS codes you may have.

  1. Paste the following code right after the import rule:
* {
font-family: 'MyWebFont', sans-serif;
}
  1. Replace the font-family declaration with the one from Google Fonts under the CSS rules to specify families.
An arrow pointing to the font-family CSS rule in Google Fonts

The complete code should look similar to the following:

@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
* {
font-family: 'Charm', cursive;
}
  1. View your form in Preview or Live mode to see the changes.

Using Custom Fonts Hosted From Your Server

The @font-face CSS at-rule allows you to load your fonts from your server and apply them to your forms.

Note

Your server needs to support HTTPS and Cross-Origin Resource Sharing (CORS). Visit Enable CORS to learn more.

To use fonts from your server

  1. Upload your font files to your server via FTP or cPanel.
  2. Copy the following CSS code:
@font-face {
font-family: 'MyAwesomeWebFont';
src: url('https://example.com/webfont.woff') format('woff'),
url('https://example.com/webfont.ttf') format('truetype');
}
* {
font-family: 'MyAwesomeWebFont', sans-serif;
}
  1. Inject the code into your form.
  2. Replace the src values in the code with your font’s URL and format.

For the CSS code, you can use any online font-face generator tool available for browser compatibility.

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:

  • Charlotte Jones - Profile picture
  • kingdevill - Profile picture
  • Evan Mueller - Profile picture
  • Kevin Kurian - Profile picture
  • Lorraine Halderman - Profile picture
  • Sunshine Escaro - Profile picture
  • Katie Ryan-O'Flaherty - Profile picture
  • Design Team - Profile picture
  • SWSLHD Wellbeing - Profile picture
  • Michelle - Profile picture
  • Danielle Carruthers - Profile picture
  • กลุ่มการศึกษาพระปริยั - Profile picture
  • Shuja Chohan - Profile picture
  • Jane Bloom - Profile picture
  • Kunn - Profile picture
  • mogulpro - Profile picture
  • Mike_Lacroix - Profile picture
  • e.murray - Profile picture
  • Franzen111 - Profile picture
  • WalnutCreekTeeth - Profile picture
  • Zonamobile - Profile picture
  • Réka Wilson - Profile picture
  • bhaslitt - Profile picture
  • alityfun - Profile picture
  • MxTraining - Profile picture