Browse Article by Topicsgoogle fonts google webfonts import fonts
Related Forum Questions
- Google fonts
- Adding Google Raleway font to web form
- Google Font not applying to form in form designer
- Adding more webfonts to JotForm
- How to import google fonts to forms?
- css for font-family in buttons and labels (Google fonts)
- How I can use a font source other than Google fonts, but is included in
- Google Font with CSS is not updating
- How do I change the font of labels?
- Using Google Fonts
How to Use Google Fonts in your FormLast Update: September 21, 2016
Aside from the built in fonts, JotForm also supports "@" at-rules e.g. @import and @font-face. You can use these codes to import your custom fonts from Google Fonts or fonts hosted on your server.
A. Import fonts from Google Web Fonts to your form using the @import code provided by Google.
1. Get your Google Web Fonts import code at http://www.google.com/webfonts
a. Search a font
b. Click Add to Collection button
c. Then click Use button
d. Copy the provided @import code
2. Go back to the Form Designer under CSS 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 on .form-all class as seen on the above screenshot. You can also use the following code.
font-family: 'Raleway', sans-serif;
Replacing Raleway with your Google Fonts name. Or you can go back to Google Fonts where you have copied your import code. On step 4 Integrate CSS (see image below), you'll see the font-family property with the font name in it. You can copy it and paste it on the .form-all class.
B. Use custom fonts hosted from your server using @font-face rule.
1. You can use the following sample code and paste it on the Form Designer under CSS tab. 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://www.web-font-generator.com/.
font-family: 'myFirstFont', sans-serif;
If you have questions, post it below.