We have implemented new fonts from Google on our website, but we encountered a major issue when trying to print pages that use two specific fonts: OpenSansRegular and OpenSansSemibold. Printing a sample page from an IE browser on an HP LaserJet P3015 resulted in a 49.4c02 error, which seems to be a common problem among HP laserjet printers according to my research. Since there are numerous references to these fonts in our style sheets, it would be quite challenging to rewrite them to depend on media queries. Therefore, I am exploring an alternative solution: replacing these fonts with Arial when printing a page. I attempted two methods:
1) Using a single CSS file with the following 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;
}
}
Note: In the "print" media query, I used the local font "Times New Roman" instead of the desired "Arial" for easier troubleshooting.
Results:
- Successful with Firefox, Chrome, Opera: OpenSansRegular is displayed on screen and "Times New Roman" in the print preview.
- Issues with IE, Edge: OpenSansRegular is not loaded, so Arial is used. It appears that IE and Edge do not support @font-face in @media queries.
2) Implementing media="print" on the link to load an 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:
- Successful with Firefox, Chrome, Opera: OpenSansRegular is displayed on screen and "Times New Roman" in the print preview
- Issues with IE, Edge: "Times New Roman" is used for both screen and print media. It appears that the last font declaration takes precedence regardless of the specified media.
Here is a zip file containing the sample code: zip file
I'm currently out of ideas, any assistance would be greatly appreciated...
Thanks to "Coop", we have included 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 are targeting IE and Microsoft Edge specifically.