Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Garbled text when printing website

I'm working on a website where the users will be printing pages from the site fairly frequently, in order to give them to people without internet access. Some of the text comes out garbled when printed on our users' office printers:

Garbled text on printout

That's supposed to say Reduced Fare and Free Ride Programs, Chicago Transit Authority.

My first thought was that this has something to do with the font we're using, so I changed that text to have font-family: 'Times New Roman', serif. Some google research made me think those font settings were widely supported and shouldn't cause problems, but our users are still having the issue.

Even if you don't know exactly how to fix this problem, I would appreciate suggestions about

  1. What other than the font selection could be causing it?
  2. If you do think it has something to do with the font, what is a good font to use? Or how could I figure that out, is it printer-specific?

Update

The page is being printed from the browser, which for this particular group of users is IE8. I'm not sure what version of Windows they're on. I've tested this on a Windows machine with IE8 in our office, and was not able to reproduce the issue. So while the browser might be a factor, I don't believe it's the only factor.

Second Update

The font we're using is Libre Baskerville, which we're loading through the Google Fonts API. It renders fine on screen, and actually prints with no issue from some of the printers at our client's office. The text only comes out garbled when printed on a Lexmark MS410dn.

like image 228
declan Avatar asked Feb 26 '15 17:02

declan


2 Answers

I saw these same types of printing errors. I created a PDF in Indesign on Windows 10 using the Libre Baskerville font. When I tried to print the PDF on OSX using Preview I got the same garbled glyphs seen above. I fixed it by uninstalling the Libre Baskerville fonts which were Truetype format and installing Libre Baskerville fonts in Opentype format and resetting the fonts in the document. It seemed to work.

like image 136
Darryl Gold Avatar answered Oct 23 '22 14:10

Darryl Gold


In the end the simplest solution was to use a different font for printing. The issue only happened with the Libre Baskerville font on a few specific printers, so in our print.css stylesheet we just use a basic serif font instead. Not ideal, but at least the printouts are legible.

In the original post I said that I had tried switching the font in the printouts and users were still having problems. This turned out to be due to caching of the print.css stylesheet, so that fix actually did solve the problem.

In the long term we'll probably find a font that works consistently on all their printers and switch the website over to that as well.

like image 29
declan Avatar answered Oct 23 '22 16:10

declan