Search code examples
cssfontsmedia-queries

Assign a standard (web safe font) using @font-face for printing

Currently, in my standard stylesheet I have:

@font-face {
    font-family: myFancyFont;
    src: url('myFancyFont.otf');
}

And I use that in other css declarations like:

.someClass {
    font-size: 18px;
    font-family: myFancyFont;
}

That all works well and good until someone goes to print the page at which point anything using myFancyFont prints out in a rather ugly font.

  • On screen version enter image description here
  • Printed version enter image description here

Notice the font looks double lined and blurry. My print.css file does change the background color from blue to grey.

Is it possible for me to redefine myFancyFont in my print.css file to a standard web safe font (like Verdana) so printing looks more normal?

I'm assuming that there could still be a problem if I simply do:

@font-face {
    font-family: myFancyFont;
    src: url('verdana.otf');  /*or a real version of the verdana font file*/
}
Solution

  • I would simply use an @media print media query with Verdana as the standard font, like this:

    @media print {
  * {
    font-family: Verdana, sans-serif;
  }
}

    Plus, if you have other, more specific CSS rules where you define your FancyFont, you'd have to include these too in this media query (changed to Verdana), or use !important in the above rule.