Is it possible to use an Adobe font with the Custom CSS?

Is it possible to use an Adobe font with the Custom CSS?

I tried to find the source code and this was the recommended code Adobe gave:

<style>

  @import url("https://use.typekit.net/onl6khw.css");

</style>

However, I have read the "How to Use Google Fonts and Custom Fonts in your Form" article and it looks like the @import function is only supported for Google Fonts? Is there a way to use @import for Adobe Fonts? 

Hi there,

Thank you for reaching out.

If Typekit provides font codes for embedding then that would be possible as it is possible with Google Fonts so it should be applied in a similar manner.

Please do give it a try and let us know how it goes.

It seems like the import worked. However, the correct font only appears on Google Chrome web browser. I tried loading the form on Safari and on my phone and the uploaded font does not appear. 

This is the form I've been testing with: https://form.jotform.com/201418585158055

I have fixed that.

You should open the CSS provided by Typekit, https://use.typekit.net/onl6khw.css, and copy the font face codes in it and inject it in the form.

Great, I've just done that myself and it is now working on my phone and Safari. However, when you edited it, even the buttons were in my font. With my edits, the buttons are not in my font. What did you do differently?

You seem to have replaced the custom CSS codes that I did in the form. Anyways, you should add !important declaration to force and override form fonts with yours.

.tk-brandon-grotesque {

    font-family : "brandon-grotesque",sans-serif !important;

}

.form-all, .form-all * {

    font-family : 'brandon-grotesque', 'Puritan', sans-serif !important;

}

Yes, sorry, just trying to learn so I wanted to replicate your process myself. Did I lose anything else you had when I replaced your custom CSS?

Thank you for your help! It worked!

Just the !important declaration :) Do it this way if it is not displaying correctly, especially on the live form view. Thank you, and please contact us again if we can help in any way.

Hello,

Something happened as I was attempting to edit my theme with my custom font and it has been completely removed. I tried pasting the CSS provided by Typekit as discussed above but it is not working. 

Can you please help me get my custom font back in this form? https://form.jotform.com/202303891369962

Hi,

I've checked your form, and can see some custom CSS, but not the code for the font. After cloning the form I've inserted the Typekit code from here https://use.typekit.net/onl6khw.css, then after my colleague's CSS and it applied the font to the form.

https://form.jotform.com/202325664784965

Feel free to clone this form further if that helps.

Let us know if we can help you with anything else.