Sam Trenholme's webpage
Support this website

Webkit @font-face bug

 

June 5 2011

2014 update: This bug has been fixed for a while

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)