8

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?

| improve this question | |
5

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.

| improve this answer | |
4

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
| improve this answer | |
  • Here is the documentation page for font-smooth: developer.mozilla.org/en-US/docs/Web/CSS/font-smooth (includes a compatibility chart). In August 10, 2020 UTC I tested <p style="-webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smoothing: unset; font-smooth: never; filter: contrast(1);">turn off anti aliasing in html text</p> with the software Mozilla/5.0 (Linux; Android 4.4.3; KFTHWI) AppleWebKit/537.36 (KHTML, like Gecko) Silk/81.2.16 like Chrome/81.0.4044.138 Safari/537.36 at htmledit.squarefree.com -- sadly, it did not work (text still had antialiasing). – Rublacava 6 hours ago
1

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.

| improve this answer | |
1

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

| improve this answer | |
0

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 ;)

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.