@media print css font ignored


Badge +3

I am using a custom font in my form. The font displays fine in the form. When I go to print to pdf the font defaults to the standard font and ignores my custom font. I am using :

@media print
{
  .Signature { 
font-family: frenchscript;
}
{

I create the custom font like this:

@font-face {
font-family: frenchscript;
src: url('linktoFRSCRIPT.WOFF');
}

.Signature { 
font-family: frenchscript;
}

This displays the font in my form just fine but is getting ignored in my media print command any ideas?


16 replies

Userlevel 7
Badge +17

Is this css in a file, or directly in the form settings? 

One troubleshoting trick to know the @Media is working is to set color:red. If the color doesn't change to red, then the issue isn't with the font inclusion.

Badge +3

adding color:red; to the @media print does not change the font red but if I change the color:red; outside the @media print type and straight to my .Signature class in the style sheet, the font prints red. seems the @media print type isn't needed if you want to print exactly what is displayed on the screen. My .Signature class now prints red but without the custom font. Any ideas?

Userlevel 7
Badge +17

Right, you only use the print media when you want the CSS to be different between the screen and paper. Are you testing this with print preview to see the changes, any print to paper tests? Is this what you are trying to accomplish?

Badge +3

setting color:red does nothing in the @media print type.  I want the font used on the screen to be the same in the pdf. if I remove @media print all together I still get a different font then my @font face defined in my css which is directly in the settings of the form not a separate file.  I have not printed anything to paper I want the .pdf file to have the same font that is in the nintex form on the screen.

thanks for taking the time to help.

Userlevel 7
Badge +17

The color:red should take, but one thing to clear up easily is that the following doesn't apply to you.

Unsupported form configuration for PDF rendering

Form ConfigurationDiscriptionBrowser
RulesCustom CSS rule @Media rule.Only applies to Internet Explorer 8.

Also, I can understand the font not working if a download of the font class is being imported at the time of rendering. Not sure if it is unsupported though.

Userlevel 7
Badge +17

Here are my results in a test in O365.

@media print { .tester {color:red;}} was put into the form settings custom css box.

On the control, I set the CSS class "tester" as so

202169_pastedImage_4.png

When I view the form I see

202168_pastedImage_3.png

When I hit print, I see

202167_pastedImage_2.png

So then I added .tester {color:blue;} so it would be blue normally, then change to red when I print.

202171_pastedImage_6.png

202170_pastedImage_5.png202172_pastedImage_7.png

So it can work, maybe its the setup for you?

Badge +3

this doesn't apply. how do I import a custom font to work with print to pdf. We don't have to worry about media queries as I want the screen and pdf to be the same. All I want is a cursive font on screen and in my pdf. thanks

Userlevel 7
Badge +17

So here is the same testing but using font-face.

202190_pastedImage_3.png

The form in edit mode that is displaying my font:

202188_pastedImage_1.png

The PDF version of the same form showing the font working correctly:

202189_pastedImage_2.png

Using Font-Face in custom CSS works in O365.

Badge +3

im using on premise

Userlevel 7
Badge +17

Ok, That shouldn't be any difference in how it works. Please compare the configuration with mine. 

Badge +3

My font shows fine in the form using this method. It does not show up in the pdf.

Userlevel 7
Badge +17

Ok, that's too bad it doesn't show up. I think at this point it is best to create a support ticket with Nintex and see if it can be corrected. Let us know how they respond.

Badge +3

they wont support it:

Response from Nintex:

Thank you for your email, I understand that you're attempting to implement custom CSS in your form and you've found that this does not work as expected.

We unfortunately do not have the knowledge or resources to troubleshoot and support custom CSS, however our technical partners are better positioned to help you with this and would be more than happy to work with you on this.

I hope that you understand our position on this, but please do get back to us if you have any further questions on the above.

Kind regards,

Badge +3

I was able to get nintex to look at the issue and they have confirmed  that custom fonts will NOT work in print to pdf for On-premise. The offered no solution to the issue stating "the development have reviewed this issue and have determined that the browser is overriding the CSS, hence why the custom font isn't used when the form is converted. Our development has also investigated if there is a workaround for this, but unfortunately, they've found this behaviour is controlled by the web browser and they are unable to override it."

Userlevel 7
Badge +17

Do we know which browsers (and versions) are affected by this? As I could not reproduce the issue in Chrome. 

Badge +3

they said Firefox, Chrome and IE are affected. I am using Nintex On-Premise 2013 Version: 2.10.0.0

Reply