I have a long Banking form and most fields can have the regular font used with Gravity forms and I prefer using and maintaining the regular font for all FIELDS but on 3 FIELDS I need to use the Banker font MICR E13B
• Any ideas How I can assign a specific Font to these 3 Fields only?
The font is called E13B, and it’s been the standard for all checks in North America since the late 1950s. The MICR E-13B font has been adopted as the international standard in ISO1004:1995
Thank you
Hello. Do you mean that the input where someone will enter their information should use this font, for those three fields only? So rather than the default font of the browser being used for the characters they type, you would display their input in this font. Is that correct?
If that is what you mean (you want to display their input in this specific font in the inputs as they type) you can use CSS to target specific inputs, like this:
#field_6_10.gfield input,
#field_6_4.gfield input,
#field_6_31.gfield input {
font-family: "Your font name";
}
I don’t know where to get the E13B font for use on the web. But assuming that exists somewhere and you can include that in your web page, this is how you target three individual inputs to use that specific font for display.
If you’re looking for something else, please let us know.
Hi Chris,
This looks Great Thank you…YES the Main Fields should be the default font from Gravity forms or the browser, but the 3 individual fonts need to be the custom font.
I’m not sure I understand your your CSS code most FIELDS I have have an ID 12 or ID 45 but your CSS code you are presenting is 6_10 and 6_4 am I missing something? Where are you getting these numbers from? is there a field number and an ID number in Gravity forms?
Also just naming the E13B font in the CSS code where would Gravity forms fetch this font from? Don’t I need to have a link to the font or upload the font to our server/domain?
Yes, it will be up to you to include the font in the page, so that it is available to use in your CSS. I could not find that font for free at Google Fonts or paid Adobe Fonts. It will be up to you to obtain that font and make it available for use on your web page. That is not related to Gravity Forms at all.
For the field IDs to target, if you view the source of your page, you will find those field IDs (it’s formatting form ID then field ID). If you were working with form 10 and fields 12 and 45, the CSS would look like this:
#field_10_12.gfield input,
#field_10_45.gfield input {
font-family: "Your font name";
}
The best way to figure out the exact ID to target is to inspect the element with the browser tools (developer console) or view the source of the page.
So I tried to add this CSS code as a test with the Times font to Wordpress CSS:
Appearance > Customize > Additional CSS
#field_2_46.gfield input,
#field_2_47.gfield input,
#field_2_48.gfield input {
font-family: "Times";
}
But no luck, nothing changed in the 3 fields. Am I doing something wrong with the font?
Can you share a link to the page on your site where I can inspect the form? Also I am not familiar with the “Times” font. If you share the link to the page on your site, I can see what fonts are available already, to show you how to target these inputs with a new font, and then you can figure out how to get the proper font. Thank you.
Hello. You only have the Google Font “Open Sans” included in the page. So I used that in my CSS just to show how this is done. You can add this CSS to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance > Customize > Additional CSS):
body .gform_wrapper div#field_2_54 #input_2_54,
body .gform_wrapper div#field_2_55 #input_2_55,
body .gform_wrapper div#field_2_56 #input_2_56,
body .gform_wrapper div#field_2_46 #input_2_46,
body .gform_wrapper div#field_2_47 #input_2_47,
body .gform_wrapper div#field_2_48 #input_2_48 {
font-family: "Open Sans", Arial, sans-serif;
color: green;
font-weight: 700;
font-size: 125%;
}
Remove the other CSS where you assigned “Times” which is not a valid font name I don’t think.
Here is what your form fields look like when I apply that CSS:
That is how you target the form inputs with a different CSS. The issue for you now is to somehow include that E13B font in the page, so that you can use that instead of Open Sans as I did in my example. Finding and including that font in the page is outside of what Gravity Forms can do. Once you have it available for use, this is that approach to target those fields with the font.
Hi Chris,
OK Looks Great! I just need to figure out how to apply the Banker Font E13B to the form.
Thank you
Hi. Yes. You will need to figure out how to add that font to your site. I did not find it anywhere. It’s also a little strange, because it’s designed to be a magnetic font, which would not work on the web, but maybe there is a font that is similar?
I tried uploading a sample of the font here WhatTheFont! « MyFonts to see if I could find a match, but struck out there as well.
Hi Chris, the Font is now loaded on our server and I just need to add the CSS to the fields I have to learn how to do it. The eCheck will be designed to have fields overlaid on the blank check and then printed on a laser printer with special magnetic ink so the check will work physically for bank deposits.
@font-face {
font-family: “CustomFont”;
src: url(“https://azpublishing.org/css/fonts/webfontkit-MICRE13B/micre13b_match-webfont.woff”) format(“woff”),
src: url(“https://azpublishing.org/css/fonts/webfontkit-MICRE13B/micre13b_match-webfont.woff2”) format(“woff”),
src: url(“https://azpublishing.org/css/fonts/webfontkit-MICR/micre13b-webfont.woff”) format(“woff”),
src: url(“https://azpublishing.org/css/fonts/webfontkit-MICR/micre13b-webfont.woff2”) format(“woff”),
}
If the font is loaded in the page, and you used the name “CustomFont” as shown in your code here, this is the CSS to use:
body .gform_wrapper div#field_2_54 #input_2_54,
body .gform_wrapper div#field_2_55 #input_2_55,
body .gform_wrapper div#field_2_56 #input_2_56,
body .gform_wrapper div#field_2_46 #input_2_46,
body .gform_wrapper div#field_2_47 #input_2_47,
body .gform_wrapper div#field_2_48 #input_2_48 {
font-family: "CustomFont", sans-serif;
color: green;
font-weight: 700;
font-size: 125%;
}
I left sans-serif as a fall back font, but you may want to change that to something else, or remove it altogether. Because if the proper font does not load, it would not work when you printed it any way.
Hello Chris,
Thank you…Is the CSS placed in the actual Form FIELD that I need to have the font used. I don’t want a CSS for all the Fields on the Form page just 3 Fields need the custom font and the other Fields would use the Default font. If you have a screen Grab to show where to place the CSS it would be helpful.
Thank you
JP
Also I’ve loaded the Font MICRE13B via GravityPDF and also placed the font in a css folder via FTP seems when I add the name font-family: “MICRE13B”, sans-serif; the fields are not showing the font. Am I doing some wrong with the font?
Any ideas? Thanks
If you added that to your page somehow, you used the font name CustomFont, just like that. You did not call it MICRE13B. You need to use the font name you assigned when you added that code to the site. From your code, it looks like the font name is CustomFont, so that is what you need to use.
This CSS I gave you:
body .gform_wrapper div#field_2_54 #input_2_54,
body .gform_wrapper div#field_2_55 #input_2_55,
body .gform_wrapper div#field_2_56 #input_2_56,
body .gform_wrapper div#field_2_46 #input_2_46,
body .gform_wrapper div#field_2_47 #input_2_47,
body .gform_wrapper div#field_2_48 #input_2_48 {
font-family: "CustomFont", sans-serif;
color: green;
font-weight: 700;
font-size: 125%;
}
can be added to your theme (or child theme) stylesheet or via the Appearance Customizer (Appearance > Customize > Additional CSS). It does not get added to the form.
OK I’ve added the font-family: “CustomFont”, sans-serif; however I’m not connecting or getting the Font to appear.
I don’t see that CSS in the source of the page. Where did you add that?
Hi Chris, I have not added it as I’m not sure where to place it for best results.
I can try it on customization > appearances > css
Thanks
