Form Builder: Google Font not taking effect

I've used Cognito for 15 years. I am considering switching to Jotform so I could use google fonts. Does your system even accept that? Because in 2 days and a half dozen hours, I could not get ONE form to accept and keep a google font. Just about everything I do breaks the code and reverts to a standard font. I've asked your AI and multiple other AIs for fixes. I tried all of them. Your bot could not make it happen. All I need to do is use google fonts and then work within your system. Your buttons, inconsistent forced groupings and other glitches make it a real mess as to eliminate nearly all customizations. The CSS code always looks correct. Your bot thinks it correct. It isn't. Neither in Edit or Preview modes. Its your system wide problems.

I'm looking for a decent form builder (you have the other functionality) that will also allow me to use more creative fonts without breaking the system. Can yours even do this???

j.

Hi Jeffrey,

Thanks for reaching out to Jotform Support. I checked your form's CSS Code and see that you're missing the font-family code in your @import rule. Check out my screenshot below to see what I mean:

To fix this, simply paste the following code after your @import rule:

* {

 font-family: 'Macondo', cursive;

}

The complete code should look like this:

import url('https://fonts.googleapis.com/css2?family=Macondo&display=swap');

* {

  font-family: 'Macondo', cursive;

}

Here's also what your form should look like afterward:

You can also check out this guide on how to use Google Custom Forms in your Form.

Let us know if you need any more help.

Thanks for the reply. Interestingly, your code for Macondo above isn't presenting Macondo. But I followed the instructions on the video and I've been able to make it work on a new from scratch form. However, I think I found the problem. I would like (not essential) that the form fields have a transparent background. When your AI entered the code for that, it broke the font code and the font reverted back a standard font. I had previously used (and you can see on the form you edited) that I had code for a transparent background in there. There is something about making the fields transparent that breaks the font coding. I "undid" that code and my chosen google font came back.

So, the question is, is there a code to make the field backgrounds transparent that works with uploaded google fonts?

here's the form I'm currently using (I started from scratch). https://www.jotform.com/build/260676646845067

you can have the AI add the code for transparent field backgrounds. Here's the code it entered:

.form-textbox:not(#productSearch-input),

.form-textarea,

.form-dropdown,

.signature-wrapper,

.form-radio-other-input,

.form-checkbox-other-input,

.form-spinner input,

.form-captcha input {

 background-color: transparent;

}

I can live without the transparent backgrounds for your other functionality. But if there is a fix, that'd be great. Or at least you can look into what's going on.

Thanks again, Jeffrey

Hi Jeffrey,

You can add the CSS code below to your form to make all input boxes transparent:

input,

select {

    background-color: transparent !important;

}



.form-advanced-signature-wrapper,

.form-advanced-signature-wrapper div,

.form-advanced-signature-wrapper canvas {

  background: transparent !important;

}

Take a look at the screenshot below to see my results:Reach out again if there’s anything else we can help you with.

thanks for that, it worked.

But unfortunately more questions. I cannot change element widths without forcing new code and the new code breaks the font code. This is continuing issue with nearly every change I need to make. For example, in Cognito forms I could very easily change the width of element and create a short width element and sit it next to a longer width element. This seems impossible in Jotform. It forces an equal width column (not what I need) without creating custom CSS code. And the CSS breaks the font code. I am finding this system very unfunctional on some very basic needs. Everything needs to be turned into custom code rather than click. And nearly every custom CSS breaks other CSS. This has happened dozens of times for dozens of needs. And when I tried to customize the column sizes, it didn't change the column sizes and broke the font. And your AI always puts in the wrong codes to the point of I will never use the AI. I just upgraded my account but I will need to force a cancellation. I simply cannot keep creating custom codes for the simplest of needs as each new CSS crashes other CSS.

Can you even change the widths of elements that actually works, doesn't break other code and isn't universal throughout the form? I simply want to put a small icon (image element) next to text element and not have the icon be as big as the text field.

More problems. The Next and Back buttons are now different colors in preview mode. And the font on the buttons is now different that the font on the forms. This happened before as well every time I enter in new custom CSS

The image uploaded to the image element has a transparent background. Looks fine in edit, but in preview it now comes with a colored background and looks bad.

And now that I'm a paid client, it still says powered by Jotform.

here's the page: https://www.jotform.com/build/260587199336167#preview

I need a system that works or I will need a refund and move on. These are very basic needs and I don't understand why everything has to be custom coded. Other than the google font, everything I'm struggling with for DAYS in Jotform is done in seconds in Cognito without a single issue.

Hi Jeffrey,

The width can be adjusted without affecting the rest of the form, but the CSS needs to target the specific fields only so it doesn’t override other styles like fonts.

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.
2. Under the Colors tab, click on Advanced Designer and go to the CSS tab in the menu on the right.
3. Select the field on your form that you want to change. The CSS selector for the field will automatically be added to the editor.
4. In CSS Helper, select specific attributes to choose a color and then, click on Select.

Give it a go and let us know if anything else comes up.

I'm sorry, but that did not answer my question nor did it work. In CSS helper I chose Width. It changed the width of the image, NOT the width of the element box. I tried Box-Sizing. That didn't do anything. I hover over the box and it's STILL half the width of the form. AND I cannot get two elements on the same line. The fonts and colors are messed up now too. Every change is breaking other code. I don't know what I need to tell you so that you understand. None of this is working. And I'm getting angry now. How do I communicate with whoever to cancel all of this and I will move on. Please tell me how to cancel this and get my money back. I've spent three weeks and I still don't even have a single base form to work with.

Hi Jeffrey,

I understand the frustration. To set this up properly, I’ll need a few details first so the CSS can be scoped correctly and won’t affect other elements in the form.

Could you share the following:

• The form link where this is happening
• Which specific fields you want side-by-side (for example the Image field and the Text field)
• The approximate width you want for each field, for example icon 50px and text field the remaining width
• Whether this should apply only to that one row or to multiple places in the form
• A screenshot of the layout you’re trying to achieve if possible. Our guide on How to Post Screenshots to Our Help Center shows you how.

With those details I can create CSS that targets only those elements, so it won’t override the font styling or affect the rest of the form.

Once we hear back from you, we can get moving on a solution.

While I get you wanting to help, how am I to rely on support to custom code every line of a form? This is unworkable. I will need to do this over and over again. I can't spend an hour getting you information to code the form every 10 minutes. I've been asking for help for days. PLEASE REVEIW EVERYTHING in this thread. These are recurring problems. Every single change corrupts other parts of the form. So what if you custom code this one line so they fit side by side. What happens on the next line, and the next? Are you going to build my form for me?

Hi Jeffrey,

The main reason your Google Fonts weren’t sticking is almost always a font code issue in the CSS itself. Even a tiny mistake like a missing bracket, an extra comma, or an improperly placed @import can prevent your chosen font from applying to the form. For example:

• A missing closing brace {… will break the rule entirely.
• Extra commas in a class list, like .class1,, .class2, make the browser ignore that CSS block.
• Overly broad rules or conflicting CSS can override or reset the font unintentionally.

So, whenever the font disappears or reverts to a default, it’s usually a syntax error or conflict in the CSS. Fixing those small errors restores the font.

In your case, it sounds like part of the font code was removed or a syntax issue occurred when adding new CSS (like for transparent fields), which is why the form reverted to standard fonts. Carefully checking brackets, commas, and ensuring the @import is correct at the top should resolve this.

While we don't provide custom form creation or designing services, but you're welcome to work with a third party who may be able to help you. You can check out our Jotform Solutions Partner Directory for a list of consultants who've asked to be included. 

You can get in touch with the right Solutions Partner for you by sorting them by location, type of service, industry, language support, or partner tier. Just fill out the contact form for the Jotform partner you'd like to work with, so they can make the necessary preparations to help you.

Keep in mind, though, that these parties operate independently of Jotform, so we assume no responsibility or liability for their work or their actions. 

Let us know if you have any other questions.

here's the code. Find the error!

@import url('

* {

  font-family : "Metamorphous", serif;

  font-weight : 400;

  font-style : normal;

}

input,

select {

  background-color : transparent !important;

}

.form-advanced-signature-wrapper,

.form-advanced-signature-wrapper div,

.form-advanced-signature-wrapper canvas {

  background : transparent !important;

}

All code was inserted by your system and untouched by me.

Hi Jeffrey,

I added an important tag to your font-family code so it will take effect on all elements even if they have native styling. I also removed the highlight that you see on the image when the field is selected and added a code to reinforce the color of the buttons. You can use the entire code below:

@import url('https://fonts.googleapis.com/css2?family=Metamorphous&display=swap');

* {

    font-family: "Metamorphous", serif !important;

    font-weight: 400;

    font-style: normal;

}

/* Make all input fields transparent */

input,

select {

    background-color: transparent !important;

}

/* Remove the brown field highlight when selected */

#id_28.form-line-active {

    background-color: transparent !important;

}

/* Image width */

#id_28 {

    width: 150px !important;

    max-width: 150px !important;

}

/* Change button colors */

.form-submit-button,

.form-pagebreak-back,

.form-pagebreak-next {

    color: #fff !important;

    border-color: #42200f !important;

    background-color: #42200f !important;

}

Take a look at the screencast below to see my results: Give it a try and reach out again if you have any other questions.

Can I escalate this please?

Your system is broken. I used your code, exactly. it worked of course. The very next thing I tried to add was a simple paragraph.

I was in a paragraph element and wanted to wrap text around an image within the paragraph. This is a BASIC, STANDARD editing tool NOT found in your paragraph editor. I asked your AI if it was even possible to wrap the text. It said yes. I asked it HOW to do that. Instead of giving me instructions IT CHANGED THE CODE and BROKE the font, for the 100th time!

I asked it to reverse that change and the font is still broken. The code is now identical to what you provided above. But it still is not showing the right font in either mode.

I TOUCHED NOTHING in the code!!!!!!!!

I am asking your system for nothing but standard editing functions that I need to use every day that don't exist natively in your system that are standard everywhere else in the universe, and it simply doesn't work by inserting CSS. This is the 10th problem I've had and I've only tried to do 10 things. I've been experience this for 3 weeks. Please do not patronize me by telling me that it's me. I cannot add any element and not break the font code. I cannot spend the time to problem fix adding every element.

Hi Jeffrey,

Simply adding new fields to your form won't easily disrupt the existing CSS code in it, but the changes made by the AI seem to be conflicting, so it broke the code. You can revert the form safely to the previous version.

You can use the Revision History feature that lets you revert your form back to an older version you select. Let me show you how to use it:

1. In Form Builder, click on the Circular Arrow icon at the top middle of the page to open the Revision History menu.
2. In the menu on the right side of the page, select the version you want to restore the form to. 
3. Now, just click on Revert next to the version you select, and then close the Revision History menu in the top right corner.

For CSS codes, you can share with us how you would like it to look after adding the fields then we can suggest a working code for you.

Give it a try and let us know if you need any help.

again you didn't answer my question. I canceled my account and demanded a refund.

Hi Jeffrey,

To request a refund for your latest invoice, just fill out our Refund Request form. And our relevant team will email you once they've had a chance to look into it.