How to Use Google Fonts and Custom Fonts in Jotform

October 17, 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.

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.
google-fonts-search-select-charm-min.png
  1. Scroll down to the Styles section and select the styles you wish to use.
google-fonts-select-style-min.png
  1. Click the icon on the top-right corner of the page to open the Selected family panel.
  2. Select @import under Use on the web.
  3. Copy the code inside the style tag.
google-fonts-import-code-min.png

Also, take note of the font-family declaration under CSS rules to specify families. To import the font into your form, proceed to the section below.

Importing Google Fonts into Your Form

To use Google Fonts on your form

  1. Open the Form Designer panel in 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

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. Next, 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.
google-fonts-specify-families-min.png

The complete code would look something like 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

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');
}
* {
    font-family: 'MyWebFont', sans-serif;
}

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

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:

  • Design Team
  • 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