What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I make my own font default to type in form fields and text area?

    Asked by zortika on March 11, 2013 at 05:05 PM

    I trying to make my own font default for users to type in form fields and text area.

    I found this CSS injection in yuur forum but it doesn't work.

    .form-textarea {font-family: Zawgyi-Onel !important;}

    font textarea web fonts default fonts
  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 06:03 PM

    Hello, for that to work you need a reference font file or a url to the font itself. That one only calls the font but from where is it from it is not declared.

    I will show you a quick way to change or test fonts in JotForm and choosing them on Google Fonts.

    First go to Google fonts

     

    After clicking Quick-use you will be redirected on a different page. Scroll down until you find the code section

     

    All you need to do is copy the link of the font and place it to your <head>...</head>

    Be sure to take note of our reference font. We will need it later.

     

    Save your form using this CSS injection. Now we need to attach the embed codes and the font link to the page or to your website.

    As you can see below I just inserted the link of the font from Google. I also pasted the embed code of Jotform to the body or to wherever you want the form to appear.

     

    Finally it will look like this. You have to know how to target the fields. Like for example form-textarea will only affect the textarea field and not the textbox. To do this you need to put .form-textbox.

     

    Thanks

  • Profile Image

    Answered by zortika on March 11, 2013 at 06:59 PM

    Thank you for your response. My entire site is in my own font and I uploaded webfonts and eot font as necessary. Even computers and mobile devices such as Android and iPad without font can view the font correctly. But users can't view the font in JotForms fields and text area. They can send and view on other devices but text nput is gibberish.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 07:02 PM

    Hello, Can you please direct me to your website link so we can investigate further thanks.

  • Profile Image

    Answered by zortika on March 11, 2013 at 07:13 PM

    http://yadanarmoe.com/index.php?option=com_content&view=article&id=1&Itemid=113

    May be I put the code in wrong place in CSS injection or some syntax error may occur.

  • Profile Image

    Answered by zortika on March 11, 2013 at 07:15 PM

    I am afraid you can't type in without the font installed on your PC though you can view it.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 07:45 PM

    Hello again. Can you also provide screenshots on what you are experiencing or seeing on your end. Thanks

    I also noticed that you declared the font files in the CSS injection section of JotForm as well. This is not necessary as the same font is already declared from your webpage. I already removed it but it does not change or show any changes. It is to be expected because it is already a redundant and it is ok to remove it.

  • Profile Image

    Answered by zortika on March 11, 2013 at 07:57 PM

    Please view it here. Unreadable.

    http://yadanarmoe.com/index.php?option=com_content&view=article&id=1&Itemid=113

  • Profile Image
    JotForm Support

    Answered by jonathan on March 11, 2013 at 08:09 PM

    @zortika

    Hi, can you please try review this guide -Beautify-your-form-with-Google-Web-Fonts

    See if this help achieve what you need. 

    Please inform us if you have further inquiry.

    Thanks.

  • Profile Image

    Answered by zortika on March 11, 2013 at 08:16 PM

    My font is not in Google webfonts. It is my language font which I uploaded to my host server.

    So I can't substitute any Google webfont.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 08:24 PM

    Hello try this, I remodified your injected code, I tested it it should be fixed now

    @font-face {
    font-family: 'Zawgyi-One';
    src: url('http://yadanarmoe.com/templates/jsn_epic_free/fonts/zawgyi.eot');
    src: url('http://yadanarmoe.com/templates/jsn_epic_free/fonts/zawgyi.eot?#iefix') format('embedded-opentype'),
    url('http://yadanarmoe.com/templates/jsn_epic_free/fonts/zawgyi.woff') format('woff'),
    url('http://yadanarmoe.com/templates/jsn_epic_free/fonts/zawgyi.ttf') format('truetype'),
    url('http://yadanarmoe.com/templates/jsn_epic_free/fonts/zawgyi.svg') format('svg');
    font-weight: normal;
    font-style: normal;
    }
    /*--move button--*/
    #id_8{
    margin-left:26px !important;
    margin-top:18px !important;
    padding:0px !important;
    }
    /*--fix name, email,website margin left--*/
    #id_1, #id_3,#id_6{
    margin-left:15px;
    }/*--border bottom--*/
    #id_7{
    padding:0px !important;
    }
    .form-html{
    padding:0px !important;}
    p.borderbottom{
    background: url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6156_form_bottom.gif) no-repeat 0 100%;
    padding: 0 29px 25px 25px;
    margin: 0;
    width:600px;
    }
    /*--position textarea---*/
    #id_5{
    position: absolute;
    top: 0px;
    left: 290px;
    }
    .form-textarea {font-family: 'Zawgyi-One' !important;}
    /*---rounded corners---*/
    .form-all input,.form-all select,.form-all textarea {
    border: 1px solid #b7bbbd;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 4px;
    -moz-box-shadow: 0px 0px 4px #C0C0C0 !important;
    -webkit-box-shadow: 0px 0px 4px #C0C0C0 !important;
    box-shadow: 0px 0px 4px #C0C0C0 !important;
    }
    /*--form all styles--*/
    .form-all {
    font-family: 'Zawgyi-One' !important;
    }
    .form-all{
    background:url(https://cms.jotform.com/uploads/image_upload/image_upload/global/6154_form_top.gif) no-repeat 0 0;
    float:left;
    }/*---remove error message---*/
    .form-error-message {display: none !important;}
    .form-line-error {
    background:none repeat scroll 0 0;
    }
    /*---button error move down---*/
    .form-button-error {
    display: block !important;
    text-align: left !important;
    top: 25px;
    left: 0;
    z-index: 111;
    position:absolute;
    }
    .form-all textarea{
    height: 195px !important;
    max-height: 195px !important;
    min-height: 195px !important;
    }
    .form-all input:focus, .form-all textarea:focus{
    outline:none;
    }/*--add red border on error--*/
    .form-validation-error {
    border: 1px solid red !important;
    }

     

    Here is the screenshot

     

    Please let me know if it works

  • Profile Image

    Answered by zortika on March 11, 2013 at 08:30 PM

    Looks good. So I have to do CSS inject with this code? If I want another form with different template can I use this?

  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 08:34 PM

    Yes you can. Also, what I did is for only the text area, in order to target the textboxes you need to insert this as well. Insert this before or after the form-textarea

    .form-textbox{font-family: 'Zawgyi-One' !important;}

  • Profile Image

    Answered by zortika on March 11, 2013 at 08:36 PM

    So I have to replace the whole CSS or hus add this code?

  • Profile Image

    Answered by zortika on March 11, 2013 at 08:40 PM

    WOW! Its great! Its working!

    JotForm support team is awesome.

    Thank you so much...

  • Profile Image

    Answered by zortika on March 11, 2013 at 08:44 PM

    Ardy0689, you are true professional. Great job.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 08:52 PM

    Thanks for those kind words. Sorry if I was not clear enough.

    Add this code

    .form-textbox{font-family: 'Zawgyi-One' !important;}

     

    To before or after this code

    .form-textarea {font-family: 'Zawgyi-One' !important;}

     

    You do not need to replace the whole code just add the code for textbox.

  • Profile Image

    Answered by zortika on March 11, 2013 at 09:00 PM

    I did and text boxes display crrectly. Thanks again.

  • Profile Image
    JotForm Support

    Answered by ardy0689 on March 11, 2013 at 09:14 PM

    Hello, no problem.

    We are glad that it is working now. Please do not hesitate to post your future concerns and inquiries here in the forum. We will gladly help you out.

    Thanks

  • Profile Image

    Answered by Myat   on February 20, 2015 at 03:50 AM

    I can't type myanmar font in textbox.Can you explain step by step

  • Profile Image

    Answered by Myat  on February 20, 2015 at 04:52 AM

    Oh!I can try by my self.Reference your answer .Thank .Not need to answer my above question.And thank your above answers..