Embed @font-face fonts when Printing to PDF with Chrome

Question

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:

1. 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.

2. 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-faces with standard web fonts does produce embedded fonts.

Any help with either issue is appreciated.

Answer 1

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