How to Use Google Fonts and Custom Fonts in Your Form

June 14, 2022

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

How to Get Your Google Fonts Import Code

  1. Open Google Fonts.
  2. Search and choose a font.
  3. Select the styles you wish to use.
  4. Open the Selected family panel.
  5. Set Use on the web to @import.
  6. Copy the code inside the style tag.
google-fonts-get-import-min.gif

Also, take note of the font-family declaration under CSS rules to specify families.

How to Import Google Fonts into Your Form

  1. Open the Form Designer panel in the Form Builder.
  2. Go to the Styles tab.
  3. Paste your Google Fonts import code in the Inject Custom CSS field.
form-builder-import-google-fonts-min.png

The @import rule must be at the top of the style sheet, make sure to paste the import code on top of all the existing CSS codes you may have.

  1. Use the font-family property to apply the imported fonts in your form:
.form-all * {
font-family: 'Charm', cursive;
}

Replace font-family declaration with the one from Google Fonts under the CSS rules to specify families.

google-fonts-family-css-rule-min.png

Use Custom Fonts Hosted From Your Server

You can use the following sample CSS code and inject it into your form using the Form Designer:

@font-face {
font-family: "MyWebFont";
src: url("https://example.com/webfont.woff") format("woff"),
url("https://example.com/webfont.ttf") format("truetype");
}
.form-all * {
font-family: "MyWebFont", sans-serif;
}

Replace the required font-family name and source URL. You can also use any font-face generator tool available online for browser compatibility.

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:

  • SWSLHD Wellbeing
  • Michelle
  • Danielle Carruthers
  • กลุ่มการศึกษาพระปริยั
  • Shuja Chohan
  • Jane Bloom
  • Kunn
  • mogulpro
  • Mike_Lacroix
  • e.murray
  • Franzen111
  • WalnutCreekTeeth
  • Zonamobile
  • Réka Wilson
  • bhaslitt
  • alityfun
  • MxTraining
  • ragandbone
  • KILLSPENCERINC1
  • harac
  • vexanhsocialskill
  • Blessedsunnyj
  • Fabiony
  • legalmartin
  • camsupremetalent
  • SXMGNO
  • leighross
  • Remarklien
  • Tess
  • kalyango
  • Riham_Hamzawi
  • eugene78
  • 5050maxcharity
  • Sanjay Pawar
  • Silkndiamonds
  • EltonCris
  • tom992
  • art_crate
  • mpt512
  • Jo
  • dealdecoa
  • dealdecoa
  • rachelconnors
  • yawouni13000
  • Luigi
  • qdesigns
  • Emma
  • 30Year
  • monikasjams
  • HospitalityDefender
  • wedolocal
  • Nivaxel
  • dorsetholidaylets
  • dorsetholidaylets
  • Mbleseri
  • schleichee
  • Chelena
  • adriaanse
  • chrisjaeger
  • chrisjaeger
  • jarmerson
  • birdwalkpress
  • Sam
  • Anvita
  • tekkon
  • jeffsingerphoto