Karan Shah Karan Shah - 22 days ago 14
CSS Question

Garbage character displayed while printing web fonts from Google Chrome

I have a problem with printing web fonts from Google chrome v 18 but it works totally fine with IE and Firefox, I am using CSS file to pass the web fonts and the code for it is as follows.

@font-face {

font-family: 'C39P24DmTtNormal';
src: url('WebFonts/v100025_-webfont.eot');
src: url('WebFonts/v100025_-webfont.eot?#iefix') format('embedded-opentype'),
url('WebFonts/v100025_-webfont.woff') format('woff'),
url('WebFonts/v100025_-webfont.ttf') format('truetype'),
url('WebFonts/v100025_-webfont.svg#C39P24DmTtNormal') format('svg');

font-weight: normal;
font-style: normal;
}


Issue Screen-Shot:

enter image description here

Image Description:

In the above screen-shot all the ones marked in red are the bar-codes provided by the web fonts in CSS file but while printing are shown as above.

I tried to search on Google, but it seems to be a possible bug with Chrome and they are trying to fix it as soon as they can.

Is there any kind of workaround that can help me as I don't want my clients to install the fonts on each and every computer they use to browse my web application.

Answer

I also had the same problem of disabled print preview from the settings but the problem in Google Chrome. It does not allow the web fonts to get loaded before printing, so just enable it back.

If you are using Windows.print on body.onLoad then remove that as its the real cause of the problem. This is only supported by Internet Explorer and not Google Chrome.

Example:

<body onload="window.print();">

Remove the onload and I hope it does the trick. If you have tried this then I am sorry.

Comments