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?

Internee

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? – Internee

I've updated my post. Did you read this article bashelton.com/2011/03/… ? – Ssw

Answer 1

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

Ssw

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, :-) – Internee

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!

Rotate

Answer 3

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.

Tovatovar

Answer 4

try font-smooth: never;

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

Tatianna

link is broken now. (I mean its 12 years later, but you know!) – Bouillabaisse