Is it possible to disable anti-aliasing in CSS when using @font-face with pixel fonts?

StackOverflow https://stackoverflow.com/questions/1752752

  •  20-09-2019
  •  | 
  •  

Question

I want to use a pixel font on the web. I'm including it using @font-face however all the browsers are applying anti-aliasing to the font. I can't seem to find a CSS rule to disable this, can anyone think of another method of disabling anti-aliasing?

Was it helpful?

Solution

Font rendering is done by the operating system and browser, so, as of yet, I believe there is little that you can do with CSS. There may be some proposed CSS rules in discussion (I've seen mention "font-smooth" or something like that), but nothing in CSS3, as far as I know, and definitely nothing in CSS2.

OTHER TIPS

This question is old, so just wanted to give an update.

Based on caniuse.com, there's a CSS property for it but has been removed from the CSS3 specification drafts. So it is not a standard solution. Some Webkit, Firefox & Opera browsers support it but it is inconsistent. It mostly works for desktop and Mac OS users

-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale

I don't think css has an option for anti-aliasing. Try cufon instead: https://github.com/sorccu/cufon/wiki/about

It's pretty easy to use and it will render your pixel fonts very well. You might also be interested in Shaun Inman's Pxfon: http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon

Most of pixel fonts just won't work properly if you are using them on a 8pt multiple size (8, 16, 24, etc.)

If you work on wrong font-sizes you will end up getting aliased/foggy characters.

Check this out...

http://www.fontsquirrel.com/fonts/list/style/Pixel

... it may help ;)

I had similar problem today and it seems that although font-smooth does not work in contemporary Firefox* adding some filter does:

filter: contrast(1);

Yet it seems to be a bit hacky to disable anti-aliasing with filter. By the way it does not cause to completely disable anti-aliasing just causes it to be applied somehow differently so bitmap fonts render correctly. On the other hand it breaks rendering of non-bitmap fonts.

 * Tested on Fixedsys from http://doir.ir/fixedsys/demo.html, on Iceweasel 38.40.0, on Debian 8.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top