face fonts when Printing to PDF with Chrome
I have a page that I'm rendering only in Chrome with a bunch of custom fonts:
@font-face{ font-family: BodyFont; src: url('fonts/font.ttf'); }
The browser renders everything perfectly. However, when I try to print this to PDF, there are two issues:
Chrome's Print-Preview sometimes does not display text in some fonts, or mangles it. This view is passed on to whatever printing device I use. Closing/re-opening the tab does not change the preview. However, restarting the browser does.
No matter what I do, I can't produce a PDF with the fonts embedded. I have tried Chrome's "Save to PDF", which produces a PDF that Adobe Acrobat cannot open. A variety of PDF Printers (such as Adobe's) do not produce PDFs with these fonts embedded, even though replacing the @font-face s with standard web fonts does produce embedded fonts.
Any help with either issue is appreciated.
Comment out media query in CSS or HTML, re-open browser and it would load the web font in print-preview, then, re-add media query section, and it works.
I found this workaround from here：@font-face embedded fonts do not show up in a print preview
Try to load default font while printing. Add the below lines to your css and try.
@media print {
body {
font-family: Arial, Helvetica, sans-serif;
}
}