CODEWITHSUNDEEP
cssprintingfonts
declan
declan

Reputation: 5635

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.

Upvotes: 6

Views: 1781

Answers (6)

tell
tell

Reputation: 113

What worked for me was to print using a PCL rather than a PS driver. That way I get proper printing and the font also looks good on screen.

@Gerard's method of using .otf files rather than .ttf ones enables proper printing too, but it has the drawback of not showing the text so nicely on the screen.

Upvotes: 0

Gerard
Gerard

Reputation: 11

Try replacing the True Type version of the font with the Open Type version - I am now able to print Libre Baskerville with no issues. The Open Type version is not easy to find as most downloads (including Google Fonts) only give you the option of a .ttf file. Search for a .otf file version - I found one here: https://www.broble.com/download-free-font/libre-baskerville

Upvotes: 1

Darryl Gold
Darryl Gold

Reputation: 31

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.

Upvotes: 3

Richard
Richard

Reputation: 11

For the record (and anyone reading this with a similar issue), I had exactly the same issue trying to print a document written in Libre Baskerville on my laptop, in LibreOffice. The font is embedded in both RTF and PDF formats and the text is garbled in the same way. I also worked around the issue by changing to a different font. It's a pity as LibreBaskerville is a nice font.

Upvotes: 1

declan
declan

Reputation: 5635

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.

Upvotes: 1

Philip
Philip

Reputation: 2988

It might be that the imported font files have some errors in them. Sometimes, if you use a online font to webfont converter it makes some mistakes with the conversion. You could try Google Fonts. Find a serif font that you like and use their files and import scripts.

For example, if you want to use the font Bitter:

  1. Just put @import url(http://fonts.googleapis.com/css?family=Bitter); at the top of your CSS file
  2. Use font-family: 'Bitter', serif; in your style declarations.

NB: The serif part is a fallback in case something goes wrong, then the clients browser chooses the default serif font instead.

Upvotes: 0

Related Questions