Truly bitmap (no anti-aliasing/shadowing/etc) fonts in CSS

1.9k Views Asked by At

I'm trying to get firefox and chrome to render bitmap fonts properly, but no matter what I seem to do they always anti-alias text to some degree. I'm using terminus, converted from TTF to WOFF and included with @font-face in CSS. Here's what I want it to look like:

(link)

But here's what it ends up looking like (in Chrome, Firefox is much the same):

(link)

if you look closely, you can see the slight anti-aliasing. Here's the relevant CSS with all attempts to stop it with no avail:

body {
  font-family: terminus, monospace;
  font-size: 12pt;
  color: #746C48;
  font-smooth: none !important;
  -webkit-font-smoothing: none !important;
  -webkit-text-stroke: none !important;
  text-shadow: none !important;
  -webkit-backface-visibility: hidden !important;
  -moz-backface-visibility:    hidden !important;
  -ms-backface-visibility:     hidden !important;
}

and the @font-face:

@font-face {
    font-family: "terminus";
    src: url([omitted]) format('woff');
}

thanks!

0

There are 0 best solutions below