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.
Getting Your Google Fonts Import Code
To generate your Google Fonts CSS import code
- Open Google Fonts and search for a font.
- Choose a font from the results.
- Scroll down to the Styles section and choose the styles you wish to use.
- Select the grid icon in the upper-right corner to open the Selected family pane.
- In the Selected family pane on the right, select @import under Use on the web.
- Copy the code inside the
styletag.
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
- In the Form Builder, select the paint roller icon in the upper-right corner to open the Form Designer.
- In the Form Designer pane on the right, go to Styles at the top.
- Scroll down to Inject Custom CSS and paste your Google Fonts import code in Line 1.
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.
- Next, paste the following code right after the import rule:
* {
font-family: 'MyWebFont', sans-serif;
}- Replace the
font-familydeclaration with the one from Google Fonts under the CSS rules to specify families.
The complete code would look something like the following:
@import url('https://fonts.googleapis.com/css2?family=Charm&display=swap');
* {
font-family: 'Charm', cursive;
}- 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
- Upload your font files to your server via FTP or cPanel.
- 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;
}- Inject the code into your form.
- Replace the
srcvalues in the code with your font’s URL and format.
For the CSS code, you can use any font-face generator tool available online for browser compatibility.
Send Comment:
70 Comments:
Would this support "Free 3 of 9 Extended"? I'm looking for a way to convert data to a barcode. This would be amazing if it could accommodate barcodes.
It doesn't work on per page set-up.
Hi! I am trying to universally update the font on my form. I used the css code below:
@import url('
* {
font-family: 'Libre Baskerville', sans-serif;
}
However, it is not working on the question text. Do you know how I can fix this?
Hello! I'm having trouble inputting an Adobe font into my form. I currently have this code:
@import url("
.form-all * {
font-family: bio-sans, sans-serif;
font-weight: 700;
font-style: normal;
}
It won't apply to the form and I'm not sure what I'm doing wrong, thank you so much in advance for your help!
Here's my form: https://www.jotform.com/build/222785901268059
Hello
I'm having trouble changing the font to public Sans. We tried importing, but it is not appearing. Could you please suggest how to make the change?
Kind regards
Deborah
I am trying to use Montserrat on all of my forms. I am unable to figure out how to add this in my Jotform, even after following the instructions. Would you please help me with it?
I've tried this numerous times and tried all the alternatives as per the comments below but still no luck when I preview. Please help. Current codes-
@import url('
@font-face {
font-family : 'DM Sans',serif;
src : url(
}
.form-all *{
font-family: 'DM Sans',serif;
}
also tried
@import url('
.form-all *
{
font-family: 'DM Sans',serif;
}
Does not works?
@import url('
@font-face {
font-family : Sarabun;
src :url('
}
.form-all{font-family: 'Sarabun', sans-serif;
only good!???
Hi! I added a custom font to my form but it's not showing up on mobile. In the form builder preview it shows up but not when loading on actual mobile devices. Any help is much appreciated. TIA.
If you are experiencing problem applying your Google font, try deleting '''' at the start and end of the import code.
I am trying to use a custom font from my server per instructions but it is not working. Please help!
Form:
Hello!
I have filled out the custom fields for a google font and the form is not updating.
@import url('
.form-all *{
font-family: 'DM Sans', sans-serif;
}
Any assistance would be highly appreciated.
I have followed each of the steps, but the font doesn't seem to be applying still:
@import url('
.form-all
{
font-family: 'Montserrat', sans-serif;
}
Any ideas where I've gone wrong?
Good evening.
I would like to import and use the google font Montserrat as my header font, while keeping the rest of the text Open Sans, which is already an option within jotforms.
I admittedly have very little experience with CSS, jotforms or google fonts, but would be grateful if someone had the time to walk me through how I might accomplish this.
Thank you.
I
This is not working for us. The page code/CSS show the font is still set at Merriweather. We are trying to use Libre Baskerville.
Thanks you, work for me
Hi,
I have attempted to inject our own font with @import and @font-face from our fonts.com web fonts project, with no avail.
Do you have any advice?
Réka.
I'm wondering, has this option been removed? I cannot find the CSS tab, and found a different(Older) support post saying it has been removed.
https://www.jotform.com/answers/1226226-what-happened-to-the-CSS-tab-in-the-Form-Designer
We would really like to use the Google fonts we have chosen for our website- is there another way to do this?
Awesome, thanks. :-)
I got this to work except for one thing. While designing the form everything is in your default font, looks like Helvetica. When I click on "preview form" it applies my font. This is good. But it would be better to design using the imported font. It's hard to design properly if not using the wanted font, particularly if the desired font is fixed-width (like Courier) but I have to design using variable width font.
Do you have a solution?
Thanks in Advance.
My form is here:
but my font isn't showing. What am i missing?
Here's my code:
@font-face {
font-family: Marr Sans Web;
src: url(
font-weight: 400;
}
.form-all *{
font-family: 'Marr Sans Web', sans-serif;
}
Hello, having some issues with the font not working in Safari. I am importing two fonts stored on Shopify:
@font-face {
font-family : Avenir;
src : url('
format('eot'),url('
format('woff'),url('
format('ttf'),url('
}
@font-face {
font-family : United;
src : url('
format('eot'),url('
format('woff'),url('
format('ttf'),url('
}
How can I get this to also work for Safari?
I accidentally removed the contact tab how can I retrieve it?
Dear Jotform, really interested in your service and i have succesfully make a form. However, I cant manage to make the form appear in my facebook page. Please help !
Great!
Mitin oloshi anto enoke install facebook
The Jotform form is easy to embed on a FB web page, but the embedding does not reflect on FB apps.
Regards,
Martin
can embed facebook, it say i have no permission
HI, I have been trying to add my form to facebook but when I select 'Add Jotorm Tab' nothing happens? And it is not a pop up issue!
HI, I have been trying to add my form to facebook but when I select 'Add Jotorm Tab' nothing happens?
how can i get likes??
I want to use "Book Antiqua" how do I do this?
it really works better
Can messages arrive in my email box?
I want to add a form to my facebook page but only the pages that i created comes up. How do I publish directly to my own FB page
Hello,
My website uses Helvetica Neue Light, purchased and stored on my computer. Is there anyway to incorporate that into my form?
I want to use devanagri hindi font in my web applicaition. When I type Sanjay it should show dropdownlist in Hindi. I will save this in sql database. Then again how to retrieve it from sql database and print on screen in hindi.
How to do it? Pls help. Im not getting any help source.
I've put this in as directed in Step 2 and my form isn't showing the font.
@import url(
.form-all{
font-family: 'Sorts+Mill+Goudy';
}
Hi Guys, we have updated the guide. There should be no more browser compatibility issues using Google Fonts for as long as the browser supports @import code. Cheers!
Need help please! Trying for hours now....
Julius Sans One
Got this from google
@font-face {
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url( format('woff2'), url( format('woff');
}
And add this:
.form-all *{font-family: 'Julius Sans One', cursive;}
I'm not sure if "cursive" is ok, I tried normal, regular... too. No luck. Please..... Thanks
Can't get Ubuntu Light 300 to work. Any help???
This is the code I have been trying:
@font-face {
font-family: ‘Ubuntu’, Light 300;
font-style: normal;
font-weight: 400;
src: local(‘Ubuntu’), local(‘Ubuntu’), url( format('woff');
}
.form-all, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea{
font-family: ‘Ubuntu’, Light 300;
font-size:16px;
font-weight: normal;
}
I must be retarded because I cannot get this to work, any chance you all could a look at my code and see what the problem is?
@font-face {
font-family: 'Jura';
font-style: normal;
font-weight: 600;
src: local('Jura DemiBold'), local('Jura-DemiBold'), url( format('woff2');
}
.form-all, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea{font-family: 'Jura', normal;}
Also, is this supposed to appear in the drop down box as a selectable font or is it just suppposed to be there whenever I type? I'm really confused right now.
I have managed to make the font the same for the entire form except the line of text I have added at the bottom of my form is there another tag I should add for that?
Currently:
.form all, .form-header, .form-all label, .form-all input, .form-all select, .form-all button, .form-all textarea {
font-family: 'Carrois Gothic';
font-style: normal;
font-weight: 400;
src: local('Carrois Gothic'), local('CarroisGothic-Regular'), url( format('woff');
}
I JUST FIND OUT ALREADY. Thank you
Please urges me to rename the incoming mail, do not tell "Jotform" but that refers to bone quin who send the form is filled, if it could be the title of the form that is best
thank you very much.
Hi! I am having a problem making this work too -- here is the code I used. Any advice is very appreciated!
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url( format('woff2'), url( format('woff');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('Montserrat-Bold'), url( format('woff2'), url( format('woff');
}.form-all{font-family: 'Montserrat';}
Thanks The Facebook app is working well in the new layout
I can not seem to implement the font Alegreya Sans SC. I do all the procedures you listed but the font is not added. where am I wrong? you could write the CSS text to be replaced?
Thanks Jotform team! The Facebook app is working well in the new layout!
Hi
Everytime I click on the 'Add Jotform tab' it pops up another window and then it says 'Error - An error occurred. Please try later'.
Thanks
Emma
The new timeline interface for business page does not allow edit of the tab title ... please advise.
Can I change the text of "Contact Us"? I'd rather it be "Free Sample".
Will this work on mobile devices? In other words, is there a mobile link to the FB form?
Facebook recently updated their layout. My "Website" tab app no longer works. Will Jot's Facebook form still work in the new Facebook layout?
I can change the text of 'Contac Us'. My clients speak spanish...
After you click on the form to open it, you can also click on the left hand top wheel which displays all your forms in Jotform. How can you stop this or at least select which ones you want people to see?
How do I delete the App when I no longer want to show it?
Do people have to sign up with jotform to see this form? When my friends click the tab they receive a signup jotform!
cool - -but what if i want to add multiple forms to a page?
Hi, I would like to use "font awesome" but that is not available in Google fonts. Is there another way of doing it? Thank you.
Awesome. Worked well.
I figured this out. Was doing something wrong.
Same problem as birdwalkpress. At
Code is as above:
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url( format('woff');
}/*Use the font name to .form-all class*/.form-all{font-family: 'Open Sans', cursive;}
AWESOME - thanks!!!
I can't get this to work! No errors, the code mirrors the above example, but I can't for the life of me get my Google Font to show as an option for Font in the Form Style page. What am I doing wrong?
You are a legend, thanks for this
Its giving following error
missing ;before statement (line 2, file "CODE")
Thanks for this. It worked perfectly with Source Sans Pro.
Will this work with fonts.com?