Sealed text when printing a website

Question

I am working on a site where users will print pages from the site quite often to provide them to people without access to the Internet. Some of the text crashes when printing on our users' office printers:

That is to say, the Tariff Reduction and Free Travel Program, Chicago Transit Authority .

My first thought was that this had something to do with the font used, so I changed this text to font-family: 'Times New Roman', serif . Some Google research has led me to think that these font settings are widely supported and should not cause problems, but our users still have a problem.

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

• What could be the reason for choosing a font?
• If you think this has something to do with the font, what is a good font to use? Or how can I understand this, it depends on the printer?

Update

The page is printed in the browser, IE8 is used for this group of users. I am not sure which version of Windows they are included in. I tested this on a Windows machine with IE8 in our office and could not reproduce the problem. Therefore, although the browser may be a factor, I do not consider it the only factor.

Second update

The font used is Libre Baskerville , which we download through the Google Fonts API. It perfectly displays the screen and actually prints without any problems with some printers in our client's office. Text is only displayed when printing on Lexmark MS410dn .

Answer 1

In the end, the easiest solution was to use a different font for printing. The problem occurred only with the Libre Baskerville font on several specific printers, so in our print.css stylesheet we just use the main serif font instead. Not perfect, but at least the prints are legible.

In the original post, I said that I tried to switch the font in the printouts, and the users still had problems. This turned out to be due to the caching of the print.css stylesheet, so the fix really resolved the issue.

In the long run, we are likely to find a font that will work consistently on all its printers and also switch it to the site.

Answer 2

For the record (and anyone reading this with a similar problem), I had exactly the same problem trying to print a document written in Libre Baskerville on my laptop, in LibreOffice. The font is embedded in both RTF and PDF, and the text is distorted in the same way. I also worked on the problem by changing it to a different font. Too bad LibreBaskerville is a good font.

Answer 3

Imported font files may have errors. Sometimes, if you use an online font for the webfont converter, it makes some conversion errors. You can try Google Fonts . Find the serif font you like and use its files and import the scripts.

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

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

Note. The serif part is the backup in case something goes wrong, then the client browser selects the default font font.