Skip to main content

Resetting the font for GOV.UK print stylesheets

Posted by: , Posted on: - Categories: GOV.UK

GOV.UK has on average 12 million visits per week. The vast majority of users simply find what they want or need and then leave. However, some users need to print parts of the site. A very few of those users found that when trying to print, they were ending up with lots of pages of nonsense characters. This post explains what we’ve done to fix this issue and what else is needed to deploy this to the rest of the site.

Here's an example of a problem print-out:

Screen Shot 2015-02-24 at 11.46.32

Is this a browser, operating system or printer problem?
GOV.UK has to be accessible to everyone and we spend a lot of time testing and debugging the site when users have trouble using it. This includes printing. However, most issues with the site displaying online are relatively easy to recreate and fix. But we have no control over hardware in a user's home. So finding and fixing issues in the hardware can be much more difficult.

Trying to replicate the problem
We tried our best to replicate the problem so that we could begin trying to solve it. But whatever we tried, we were unable to reproduce the issue. Which meant we really didn’t have anything to work from. Usually when we find a bug we try to get the same thing to happen on our computers, so we can "debug" or fix it. Not being able to do this meant we spent a lot of time scratching our heads.

We had details of the users' operating systems, which browsers they were trying to print from, and sometimes we even knew which printer they were using. But we couldn't get the same things to happen on our machines. And we couldn't go back to people and say "Er, we tried a fix, did that work?"

Eventually a user from within government approached us with the same issue. Which was very handy. That meant we could liaise with them and try fixes that we thought would work and then ask them to test them before we released that fix. It took many discussions across many groups of developers to work out that it was probably a problem with the printer not supporting the font.

The fix
The eventual fix was essentially very simple and short. Or at least the theory was: to reset the font to a system standard sans-serif when printing, and do this without specifying a named font, just a type or group of font. That way all browsers, operating systems and printers should fall back to using their default sans-serif font, whether that's Arial, Helvetica or another simple sans-serif font.

So I updated the GOV.UK front end toolkit to include a font reset which would be shared across all the parts of the site that use it. Which is most of it. I updated the the font stack to include a print reset variable and then included that to the typography CSS. This solved all the problems that we know of.

What next?
Some parts of GOV.UK have their own front stacks and typography CSS. In the Departments and policy section, the application, Whitehall, was overriding the font stack and importing styles from the front end toolkit. This issue has been solved by David Singleton with an intermediate solution.

Since these updates, we have had no further issues or complaints from users regarding printouts displaying odd characters.

Sharing and comments

Share this page