Is it possible to disable font smoothing in CSS?

Question

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

Answer 1

try font-smooth: never;

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

Answer 2

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!

Answer 3

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

Answer 4

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>

2. 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);
}

3. 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;
}

4. 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);
}

5. 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.