How to use a font that is not in Google Fonts?

Hi, I have been requested to design a form using a font (Aero - https://www.dafont.com/aero2.font) that is not listed in google fonts. Is there anyway to incorporate it into my form?

Thanks!

Please refer to section B on this guide https://www.jotform.com/help/100-How-to-Use-Google-Fonts-and-Custom-Fonts-in-your-Form on how you can add your custom font.

Let us know if you have any questions or if you need further assistance. 

Hi Jed_C,

I managed to use web-font-generator to generate the CSS:

@font-face {

  font-family: 'Aero';

  src: url('Aero.eot') format('embedded-opentype');

  font-weight: normal;

  font-style: normal;

However I'm so sorry but I'm lost on how to implement this into the form. I opened the advanced designer and copied and pasted the CSS and got the accepted message:

However, how do I then implement this to my form elements? In addition, I only want to implement this to a part of the text. For instance, 

"XXX Company would like to collect your opinion via this survey"

Only the text "XXX Company" would be in the Aero font. Would I be able to do this?

Thank you!

I'm not able to find the "XXX Company would like to collect your opinion via this survey" in your forms. Would you mind sharing the form you are working and provide some screenshot on which field or text you want the font applied?

By the way, you'll need to find the source URL where the font is hosted. If you don't have that link, you'll need to host somewhere. For example, I've downloaded the font and hosted it on my FTP page so the URL where the file is hosted is "http://shots.jotform.com/jed/fonts/Aero.ttf"

Here's a sample script:

@font-face {

  font-family: 'Aero';

  src: url('http://shots.jotform.com/jed/fonts/Aero.ttf') format('embedded-opentype');

  font-weight: normal;

  font-style: normal;

}

The one highlighted in yellow is where I've hosted the font.

Let met know if you have any questions.

Try injecting this:

@font-face {

    font-family: Aero;

    src: url(http://shots.jotform.com/jed/fonts/Aero.ttf);

    font-weight: bold;

}

.form-label *{

font-family: 'Aero';

}

This will change the font of all field labels in your form. 

ex.

Hi Jed_C,

I managed to do the injection of the code, however my form doesn't show the changes:

Thanks!

I updated it to:

@font-face {
    font-family : "Aero"!important;
    src : url(http://shots.jotform.com/jed/fonts/Aero.ttf);
    font-weight : bold!important;
}
.form-all * {
    font-family : 'Aero', Aero!important;
}

Please open the form using the direct link to see the changes: https://form.jotform.me/92378649358475

Kindly check the fonts again on your end and let us know how it goes.

Hi Jherwin,

Thanks for your help, I saw that it updates to look like this: 

However it doesn't look like the webfont aero: https://ttfonts.net/font/2188_Aero.htm

Is this a display issue? Also, can I partially change the font (i.e. just the name of the ocmpany and not the rest of the text?)

Thanks!

It seems the problem is the downloaded font.

I tried the aero2 font and it's working: https://www.jotform.com/92378649358475

Please find the right font or style you like and download it. You can then change the URL that is placed in the CSS.

Hi Jherwin,

Thank you very much for the help, I will try to work the font out!

As a side note, is it possible to only apply the font to selected text in the box and not the whole form?

Yes, that's possible. You just need to get the form elements class/ID and apply the CSS code to the target class name.

If you would like to know the element ID/Class of the Texts (HTML fields) in your form, the easiest way would be is to use your browser's DevTools.