CODEWITHSUNDEEP
cssgoogle-chromewebfonts
Karan Shah
Karan Shah

Reputation: 752

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.

Upvotes: 5

Views: 4447

Answers (4)

user1353654
user1353654

Reputation: 124

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.

Upvotes: 0

Chaoix
Chaoix

Reputation: 1360

The real fix for this issue is to not load the webfonts async on preformatted print pages. Doing so you can still use window.onload = window.print() to force the print dialog without any issues.

<script>
  WebFontConfig = {
    typekit: { id: 'xxxxxx' }
  };

  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
              '://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'false';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

Upvotes: 0

vicgilbcn
vicgilbcn

Reputation: 149

In my case it was due to the use of relative font-size in vw. I put a rule in @media print {} with size in pt and worked perfect. The funny thing was that it was only happening in Chrome.

Upvotes: 0

laszlo-horvath
laszlo-horvath

Reputation: 2129

Put .svg at the start of the sources and try with different formats, like .svg as truetype:

@font-face {
    font-family: 'EnzoOT-Medi';
    src: url('font.eot');
    src: url('font.svg') format('truetype'),
         url('font.eot?#iefix') format('embedded-opentype'),
      url('font.woff') format('woff'),
      url('font.ttf') format('truetype'),
      url('font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Upvotes: 1

Related Questions