CODEWITHSUNDEEP
cssinternet-explorermedia-queriesfont-facemicrosoft-edge
P. Debrabant
P. Debrabant

Reputation: 171

IE 11 - screen font, print font with media type don't work

Our new site use some fonts from Google and we recently discover that there is a big problem to print a page with 2 fonts : OpenSansRegular and OpenSansSemibold. A sample page print on a HP LaserJet P3015 from an IE browser runs into 49.4c02 error. It seems (I googled a lot) that this problem occurs on most HP laserjet printers. There are plenty of calls to these fonts in our style sheets, so rewrite them to make dependencies from media queries will be a hard work. So I'm looking for an alternative : when I print a page, I want to replace these fonts by an Arial font. I tried two ways :

1) call one single css. It contains this code :

@media screen {
    @font-face {
         font-family: OpenSansRegular;
         src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
         font-weight: normal;
         font-style: normal;
    }
}
@media print {
    @font-face {
        font-family: OpenSansRegular;
        src: local("Times New Roman");
        font-weight: normal;
        font-style: normal;
    }
}

Notice : on media "print" I use the local font "Times New Roman" and not the target "Arial" because it's more easy to check the differences and see if it's work !

Results

2) use media="print" on the link to load the alternate font :

<link href="screen_font.css" rel="stylesheet" type="text/css">
<link href="print_font.css" media="print" rel="stylesheet" type="text/css">

screen_font.css :

@font-face {
    font-family: OpenSansRegular;
    src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
    font-weight: normal;
    font-style: normal;
}

print_font.css :

@font-face {
    font-family: OpenSansRegular;
    src: local("Times New Roman");
    font-weight: normal;
    font-style: normal;
}

Results

Here a zip file with the sample code : zip file

No more idea on my side. Any help will be appreciated...

Thanks to "Coop", we have added these media queries :

//IE10 and 11 hack
@media print and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body * { font-family :Arial, sans-serif ; }
}
/* Windows 10 Edge Browser */
@media print and @supports (-ms-accelerator:true) {
    body * { font-family :Arial, sans-serif ; } 
}

We target IE and of course Microsoft Edge.

Upvotes: 2

Views: 2991

Answers (1)

CaribouCode
CaribouCode

Reputation: 14398

I think you may indeed run into issues trying to load @font-face inside @media queries. The way I expect most people would do this would be to load any fonts outside of media queries so they're ready to use. Then use media queries to apply the correct font. For example:

@font-face {
  font-family: OpenSansRegular;
  src: url(fonts/OpenSans-Regular-webfont.eot?#iefix) format("embedded-opentype"), url(fonts/OpenSans-Regular-webfont.woff) format("woff"), url(fonts/OpenSans-Regular-webfont.ttf) format("truetype"), url(fonts/OpenSans-Regular-webfont.svg#OpenSansRegular) format("svg");
  font-weight: normal;
  font-style: normal; }

@media screen {
  body { font-family: OpenSansRegular; }
}

@media print {
  body { font-family: "Times New Roman"; }
}

Upvotes: 2

Related Questions