Chrome Print Preview doesn't load @media only print font-face

Just found this question via Google after we had just experienced the same problem. Sad to see 11 months gone by with no answer, so perhaps this will help you and others.

Chrome seems to load the custom font 'on-demand'. So, if the font isn't already used on the page, your first 'Print Preview' fails to have it yet, subsequent ones will have it. Likely a timing issue there.

One solution would be to make sure you also use the print font on the regular version of the page.

@font-face {  font-family: "Computer Modern";  src: url('/fonts/cm/cmunrm.otf');  font-weight: normal;  font-style: normal;}@media only print {    body {        font-family: "Computer Modern", serif;    }}.printfont {    font-family: "Computer Modern", serif;}

https://jsfiddle.net/72bsf1n0/8/

There is a issue for this here https://bugs.chromium.org/p/chromium/issues/detail?id=284840

For now you need to sure there is printed font rendered before using print and you render at least 1 character from every language group you want to print:

• Cyrillic (Supported by Open Sans)
• Cyrillic Extended (Supported by Open Sans)
• Greek (Supported by Open Sans)
• Greek Extended (Supported by Open Sans)
• Latin (Supported by all Fonts)
• Latin Extended (Supported by Open Sans)
• Vietnamese (Supported by Open Sans)

For now I add characters from Latin extended

<div class="chrome-font-fix">sš<b>sš</b><i>sš</i></div>

with invisible style

.chrome-font-fix {    position: absolute;    visibility: hidden;}