How to change whole form font to "brandon" font?

  • Profile Image
    boksha
    Asked on November 01, 2017 at 03:16 PM

    Hi , 


    Since i am integrating the jotform in my website and the whole website is based on Brandon Font, I would like to change my forms font to Brandon, can you please assist me in that ?


    Yahya

  • Profile Image
    aubreybourke
    Answered on November 01, 2017 at 04:36 PM

    Yes, we can assist you.

    Can I ask is there a URL for your Brandon font?

    I checked online and I can only see paid versions. Have you purchased it already?

    Or do you have the downloaded file on your computer?

     

    We can try applying the font with the instructions here:

    CSS3 @font-face Rule

  • Profile Image
    boksha
    Answered on November 02, 2017 at 01:34 AM

    Hello aubreybourke,


    you may download the font from https://drive.google.com/open?id=0B3gaErcFkaCXTC1BeW96SVNJM2c


    Thank you

  • Profile Image
    boksha
    Answered on November 02, 2017 at 03:25 AM

    leme know if you can help please


  • Profile Image
    Chriistian
    Answered on November 02, 2017 at 05:38 AM

    You can generate your @font-face codes using this tool https://www.web-font-generator.com/ and add it on the Form designer on the Form builder. For example:


    @font-face {

        font-family: myFirstFont;

        src: url(http://www.yoursite.com/fonts/coolfont_bold.woff);

       font-weight: bold;

    }

    .form-all *{

    font-family: 'myFirstFont', sans-serif;

    }


    Let us know if you need more help.

  • Profile Image
    boksha
    Answered on November 02, 2017 at 06:30 AM

    Thank you for your reply but i am a bit confused.


    is there something i can copy directly to make it work?

    here is the font https://drive.google.com/open?id=0B3gaErcFkaCXTC1BeW96SVNJM2c

  • Profile Image
    liyam
    Answered on November 02, 2017 at 08:15 AM

    I have converted your font to web open font format (woff). Here is the link that you can download

    http://lexanimo.rf.gd/jotform/brandon - woff font.zip

    In addition, as a temporary measure, I also have uploaded the files in http://lexanimo.rf.gd/files/. You should be able to download and see the demo page there.

    If you do not have a web host account or a website, I can suggest to you some free hosting services where you can upload your files and then use the said font on your form as how Chriistian recommended it.

    Feel free to get back to us if you have questions or if you need assistance.

  • Profile Image
    boksha
    Answered on November 03, 2017 at 07:15 AM

    Thanks liyam, Im not sure of what to write in the css . do I write the following in the forms css?


    .your-style { font-family: 'Brandon Text'; font-weight: normal; font-style: normal; }
  • Profile Image
    candy
    Answered on November 03, 2017 at 09:16 AM

    Dear @boksha,

    I have cloned your form named "Job Application Form" on my side in order to test it.

    I am able to use the file that my colleague Liyam has converted to web open font format (woff). However, I need to inform you about that I have uploaded the files inside that zip file to my FTP server in order to use them in CSS codes. So, you need to upload the files to your own FTP server in order to call them.

    After uploading all of those files to my FTP, I have injected following CSS codes to the form in order to make it work as you can see in the following screenshot below:

    @font-face {

        font-family: 'Brandon Text';

        src: url('http://shots.jotform.com/cicek/BrandonText-Thin.eot');

        src: url('http://shots.jotform.com/cicek/BrandonText-Thin.eot?#iefix') format('embedded-opentype'),

            url('http://shots.jotform.com/cicek/BrandonText-Thin.woff2') format('woff2'),

            url('http://shots.jotform.com/cicek/BrandonText-Thin.woff') format('woff'),

            url('http://shots.jotform.com/cicek/BrandonText-Thin.ttf') format('truetype'),

            url('http://shots.jotform.com/cicek/BrandonText-Thin.svg#BrandonText-Thin') format('svg');

        font-weight: 500;

        font-style: normal;

    }

    button{

       font-family: 'Brandon Text' !important;

    }

    label{

       font-family: 'Brandon Text' !important;

    }

    div{

       font-family: 'Brandon Text' !important;

    }

    1509714847Screen_Shot_2017-11-03_at_4_13

    So that way I have seen that the whole form text font has changed to Brandon. Please check the form on my side at the following link: https://form.jotform.com/73063753523960 

    I hope this will help.

  • Profile Image
    boksha
    Answered on November 04, 2017 at 03:20 AM

    Thank you this is amazing, is there a way to keep it bold Font?



  • Profile Image
    ashwin_d
    Answered on November 04, 2017 at 08:31 AM

    Please inject the following custom css code in form and that should make the labels bold:

    .form-label .form-label-top {

        font-family: 'Brandon Text' !important;

        font-weight: bold !important;

    }

    The following guide should help you how to inject custom css code in form:  https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

  • Profile Image
    boksha
    Answered on November 06, 2017 at 12:51 AM

    Hello ashwin,


    I followed your instruction, if you look at the form's font it looks a bit weird and faded.

    here is the link

    https://form.jotform.me/72304551484454


    thank you

  • Profile Image
    ashwin_d
    Answered on November 06, 2017 at 02:19 AM

    I did check your form but did not find the custom css code shared by me. I have gone ahead and injected the custom css code to make your question labels bold but that does not seems to work. 

    I will work on this and get back to you soon.

  • Profile Image
    ashwin_d
    Answered on November 06, 2017 at 02:35 AM

    Your form label font size is 14 px which will be displayed faded and is caused because of the font family. I would suggest you to please increase the font size of form label, that should solve your problem. You can also inject the following custom css code to see if that solves your problem:

    label {

        font-family: 'Brandon Text' !important;

        font-size: x-large !important;

    }


  • Profile Image
    boksha
    Answered on November 06, 2017 at 02:50 AM

    thank you for your help, I don't know why the font family in the jotform looks weird.

    I tried the custom code still doesnt look great.


  • Profile Image
    boksha
    Answered on November 06, 2017 at 02:53 AM

    hence I removed it.

  • Profile Image
    Chriistian
    Answered on November 06, 2017 at 04:06 AM

    I have managed to add the custom CSS on your form (https://form.jotform.me/72304551484454). 

    15099591292017-11-06_1704.png



    Kindly check and let us know if you need further assistance.

  • Profile Image
    boksha
    Answered on November 06, 2017 at 06:07 AM

    Thank you, still the font doesnt look normal. Size is massive + text looks faded !

     

    it might be that brandon text was not added properly?

     

  • Profile Image
    ashwin_d
    Answered on November 06, 2017 at 07:59 AM

    I believe the issue is related to font itself. The smaller size texts are not appearing correctly. I did check the font and I can confirm that for bigger font size, the "Brandon Text" is displayed faded. Please check the screenshot below:

    1509973066fontSize.gif


  • Profile Image
    boksha
    Answered on November 06, 2017 at 08:09 AM

    how can I fix that ? i have this font used in the website and its working fine. only when inserted to jotform the fading appears

  • Profile Image
    ashwin_d
    Answered on November 06, 2017 at 09:11 AM

    Please let me know your website URL where you have used this font and we will take a look.

    We will wait for your response.