Partner Solution: Print to PDF not working on Nintex Form

On occasion, we plan to share through this blog some of the technical solutions provided by members of the B&R team. In the following example, B&R's Thomas Daly (@_tomdaly_) has created a solution for a common problem with Nintex forms where print to PDF is not working. We hope you find this information useful:


I stumbled across an issue last week where a client was reporting that the custom branding broke the print functionality of their Nintex forms. I made the master page so I already know that I didn’t chop out anything from the masterpage, it might be hidden but it’s still there. I wondered how can just some CSS break the page. Perhaps it was some of that JavaScript code that we wrote? Or maybe a conflicting version of jQuery? …Nope. After a few hours or trial and error (showing all hidden zones, removing all js and css, thenslowly putting things back in) I found the issue with the references to Google Fonts.

This is my normal way of linking multiple google fonts. Nintex Print to PDF doesn’t seem to like the first line. It specifically doesn’t like the ‘,’ in the url. If you removed everything after “400” then it would work fine. Our design requires all 4 weights of this specific font. In other designs we’d have multiple google fonts with multiple weights being requested.

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'/>
<!--[if lte IE 8]>
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700" />
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:800" />
<![endif]-->

Simple fix is to link to each file independently (not the most efficient since you are making 4 calls to google instead of 1) Ultimately you likely won’t notice any difference.

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300" />     
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400" />     
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:700" />     
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:800" />

You can see in the image below that the fonts are all loading at the same time anyway taking 16ms except for that one. This is an example on just one load time. You will get different results each time. Google fonts are also cached so it’s likely the users will already have a copy in the browser.


You can find Tom's original post at www.thomasdaly.net which includes many other developer tips and best practices for SharePoint branding and customization. We look forward to sharing more of these great solutions moving forward, and we look forward to your feedback!