22

I want some small fonts to look with no smoothing. Is it possible to disable font smoothing using HTML/CSS?

German Latorre
  • 10,058
  • 14
  • 48
  • 59
  • Sorry for not providing any feedback until now. Unfortunately it didn't work for me in Google Chrome. Fonts still smooth, :-( Maybe some OS-dependant issue? – German Latorre May 16 '12 at 07:25
  • I've updated my post. Did you read this article http://bashelton.com/2011/03/force-font-smoothing-in-chrome-on-windows-hack/ ? – Eugene Trofimenko May 16 '12 at 08:11

4 Answers4

27

Yes, it's possible, but not for all browsers.

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased

For your case:

font-smooth: never;
-webkit-font-smoothing : none;

UPD(for Chrome): Force Font Smoothing in Chrome on Windows

Eugene Trofimenko
  • 1,611
  • 1
  • 13
  • 19
  • 1
    Thanks Eugene, but the link you provided talks about force smoothig, and I want no smoothing at all for some text in my web app, :-) – German Latorre May 17 '12 at 11:11
6

Yes, although I can't say which browsers will take any notice of you!

You can write

<p style="font-smooth:never;">

to get the effect you want.

EDIT

I was sure I had used this some months ago, but I read on the Mozilla Network

Though present in early (2002) drafts of CSS3 Fonts, font-smooth has been removed from this specification and is currently not on the standard track.

Sorry!

Borodin
  • 126,100
  • 9
  • 70
  • 144
3

try font-smooth: never;

http://webdesign.about.com/od/styleproperties/p/blspfontsmooth.htm

Chase
  • 29,019
  • 1
  • 49
  • 48
2

I was looking for this as well. And I eventually found a solution on another stackoverflow thread ( How to get "crispEdges" for SVG text? ) to disable text smoothing ( disable anti-alias ) for SVG but this solution also works for regular HTML elements.

The trick is using using an SVG filter, which you can then add to any HTML element to make anything crispy.

  1. First we need to define the filter, so we can use it inside of our CSS.
<svg class="offscreen" width="0" height="0" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <filter id="crispify">
            <feComponentTransfer>
                <feFuncA type="discrete" tableValues="0 1"/>
            </feComponentTransfer>
        </filter>
    </defs>
</svg>
  1. Add the filter to a HTML element that only contains text. If it has a background-color or something, it doesn't work.
p {
    filter: url(#crispify);
}
  1. extra stuff: you will probably want to hide the SVG element, so add this to the CSS.
.offscreen {
    position: absolute;
    left: -100000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
  1. another thing: if it looks weird with a white color, change the color to black and invert it using another filter, so your code looks like this:
p {
  filter: url(#crispify) invert(1);
}
  1. Note, this will look the best for fonts that are designed to be crispy, like pixel fonts. I also do not know if this will work with all browsers, but it does work on Chrome, Edge and Firefox.
nathnolt
  • 435
  • 6
  • 8