- amapecageAsked on April 22, 2013 at 01:26 PM
I've been trying to use custom fonts in a form and after trying to use the CSS code injection, it doesn' work.
I've downloaded the zip file with the souce, I've put those files in my webserver (I've also uploaded the fonts to a folder named fonts).
I've changed the code to load the fonts in the head section of the html file but the fonts are not used. I've been using the same code in a html file and it works so, What is wrong with the code insertion? I've been inspecting the web with the webdeveloper plugin for firefox and the fonts seems to be changed but not rendered.
What can I do?
The form in question is 31072099557358
The site where I uploaded the code is at http://www.hackinspain.com/silestone/Proyectos%20Silestone.html
Thanks in advance and please help!!!
- jefreylandichoAnswered on April 22, 2013 at 01:48 PM
I checked your website and the font source url you have provided appears to be invalid.
Please try changing or updating the font source url.
- amapecageAnswered on April 22, 2013 at 02:03 PM
Thanks for your answer!
I've used this same code in a test page and it works!
I've changed it to: src: url("/fonts/remachine.ttf"); and still doesn't work with the Jotform generated code but it works ok with the sample page to test the fonts.
I've been all this evening trying o get this working but I'm havin' no luck. Any hint I can use?
Thanks again for your help!
- amapecageAnswered on April 22, 2013 at 02:06 PM
Sorry! I'm trying the url posted above src: url("/fonts/remachine.ttf") in my test page and it doesn't works!!! What am I doing wrong?
- JotForm SupportWelvinAnswered on April 22, 2013 at 04:27 PM
Inject this codes to your form:
src: url("http://www.hackinspain.com/silestone/fonts/Remachine.eot") /* EOT file for IE */
src: url("http://www.hackinspain.com/silestone/fonts/Remachine.ttf") /* TTF file for CSS3 browsers */
font-family: MyCustomFont, Verdana, Arial, sans-serif;
font-family: MyCustomFont, Impact, "Arial Black", sans-serif;
Note, you can't see the changes on the editor. You'll have to preview the form to see that.
- amapecageAnswered on April 23, 2013 at 06:50 AM
Hi! This is working only on Google Chrome, but at least I know it's possible to change fonts.
Any idea about how can I make it work with other browsers?
Is it possible to get it working with the form hosted in my server?. I've tried to inject the code into the .css files, I've added the code to the .html file and replaced the font-family statement in the code. When I inspect the code with firebug it tells me that the font family is correct but the font is not applied (none of the browsers I've tested apply the style).
Is here any way to fix this?
Thanks in advance, your help is very appreciated.
- amapecageAnswered on April 23, 2013 at 07:01 AM
Nah! Forget it! I've been too stupid to see the fail!!! I've got it working!!! Sorry for any inonvenience, I need to sleep a little.
Thanks again, you rock guys!!!!
- amapecageAnswered on April 23, 2013 at 09:30 AM
OMG! I'm becoming mad, how much custom fonts can we use? If I put another font-family name or rename the MyCustomFont family, it doesn't works! I need to use three different font-family types in my form, what can I do?
- JotForm SupportWelvinAnswered on April 23, 2013 at 10:36 AM
You will need to target the ID or Class of the fields you want to change its font family.
First, find the ID of the field by following this guide: How to Find Field IDs & Names
Second, inject the custom Font Family using the ID.
From your form: http://www.jotform.com/31072099557358, the word "¿Quieres que la gente conozca tus proyectos?" have the following ID: text_28. The codes to inject are the following;
font-family: MyCustomFont !important;
Let us know if you need any further assistance.
- JotForm SupportNik_CAnswered on February 22, 2017 at 06:11 AM
Since this is an older thread, I opened a separate one for you and we will attend it here shortly.