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

Question

I would like a different font-face for print than for screen. Unfortunately Google Chrome Print Preview (works on other browsers) won't load the font-face and won't show the text. But if you try it a second time, the font-face is loaded and then, Google Chrome Print Preview will show the text!

Here is a fiddle on which you can reproduce the problem. (nb: on the fiddle the font url does not exist, but at least the preview should show the text as 'serif').

Is there a better solution than forcing the pre-loading of the print font-face for all @media?

The problems occurs on all versions of Google Chrome <= 53.

I used this code:

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

    body {
        font-family: "Computer Modern", serif;
    }
}

https://jsfiddle.net/72bsf1n0/

Answer 1

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/

Answer 2

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;
}