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, then  slowly 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.

 

 

 

About the Author

Developer, Designer, Thinker, Problem Solver, Office Servers and Services MVP, & Collaboration Director @ SoHo Dragon.

View Articles