Geek asks and answers

Embed @ font-face fonts when printing to PDF using Chrome

I have a page that I only show in Chrome with a bunch of custom fonts:

@font-face{ font-family: BodyFont; src: url('fonts/font.ttf'); }

The browser does everything perfectly. However, when I try to print this in PDF, there are two problems:

  • Chrome Print-Preview sometimes doesn’t display or distort text in some fonts. This view is transmitted to any printing device that I use. Closing / reopening a tab does not change the preview. However, restarting the browser does.

  • No matter what I do, I cannot create a PDF file with embedded fonts. I tried Chrome "Save to PDF", which creates a PDF that Adobe Acrobat cannot open. Various PDF printers (such as Adobe) do not create PDF files with these embedded fonts, although replacing @font-facewith standard web fonts creates embedded fonts.

Any help with any problem appreciated.

+5
source share
2 answers

Comment the media query in CSS or HTML, reopen the browser and it will load the web font in preview mode, then add the media query section again and it will work.

: @ font-face

+3

. css .

@media print {
 body {
      font-family: Arial, Helvetica, sans-serif;       
  }
}
0

More articles:


All Articles