cancel
Showing results for 
Search instead for 
Did you mean: 
Workflow Hero

@media print css font ignored

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?

Reply
16 Replies
Workflow Hero

Re: @media print css font ignored

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.

Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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?

Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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?

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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.

Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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.

Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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

When I view the form I see

When I hit print, I see

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

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

Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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

0 Kudos
Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

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

The form in edit mode that is displaying my font:

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

Using Font-Face in custom CSS works in O365.

Accept as Solution Reply
Workflow Hero

Re: @media print css font ignored

im using on premise

Accept as Solution Reply