As I was testing the printing of my web page this morning, I discovered that Webkit (the HTML rendering engine used by the Safari and Chrome browsers) has a nasty @font-face bug: It can not correctly print pages that use a custom font.
The problem is that the character mapping of the font gets screwed up when sent to the printer, making the text gibberish. I am seeing this problem in Windows 7 using the Safari browser.
My solution is to add something like this to the bottom of my printing CSS:
@media print and (-webkit-min-device-pixel-ratio:0) {
h1 { font-family: sans-serif; }
h2 { font-family: sans-serif; }
h3 { font-family: sans-serif; }
.blogtitle { font-family: sans-serif; }
/* Any other classes or tags that use the custom font get the
* same treatment */
}
The first line of the above CSS tells browsers "ignore this CSS if you are
not Webkit"; the rest of the CSS tells Webkit "never mind the custom font,
just use an ordinary sans-serif font". I'm not a big fan of CSS hacks like
-webkit-min-device-pixel-ratio, but I figure by the time Webkit
no longer recognizes this tag, they will have fixed their @font-face
printing bug.
While discussing @font-face issues, another issue is that some browsers don't show anything while the font is loading. This is an issue for people still in dial-up hell and one I have kept in mind. My solution is to only use one custom font (at one single weight and style); I have also edited the font so that it only has characters in languages I personally know.
To post a comment about an entry, send me an email and I may or may not post your comment (with or without editing)