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

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

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

Hello aubreybourke,

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

Thank you

leme know if you can help please

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.

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

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.

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; }

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;

}

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.

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

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 

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

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.

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;

}

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.

hence I removed it.

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

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

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

 

it might be that brandon text was not added properly?

 

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:

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

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.