Webfont Smoothing and Antialiasing in Firefox and Opera

113
votes

I have custom-made web fonts used on my site. To style my rendering output, I used the following code:

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

This works fine on Safari and Chrome (edges are sharper and lines are thinner). Is there any way of implementing the same style on Firefox and Opera?

8
cssfontswebfontsantialiasing
It would be a good idea to stop doing that and read why here: usabilitypost.com/2012/11/05/stop-fixing-font-smoothing – fregante
^ this is a broad generalization and it's fine to use font-smoothing. It's the rendering issue that is the problem, not the designer behavior. When you design a layout and the font appears to be semi-bold due to the rendering engine then it's the engine that needs fixed, not the layout. – Dylan
It's not entirely a broad generalization. The article says that subpixel rendering was primarily intended for making light text on dark backgrounds more readable (i.e. accessible), and making a broad CSS definition like body { -webkit-font-smoothing: antialiased; } is too heavy-handed. – Matt Scheurich
My web fonts that are dark on light backgrounds are getting "faux bolded" as well. I say "antialiased" all around. – Jason T Featheringham
How a page displays is up to the designer, including all typographic attributes. It's their responsibility to ensure usability, consistency, and appeal across the widest range of platforms. Access to font smoothing attributes via CSS enables greater control. Like anything, it can be misused in the wrong hands. But touting personal philosophy rather than answering the question isn't helpful. – Beejor

8 Answers

195
votes

As Opera is powered by Blink since Version 15.0 -webkit-font-smoothing: antialiased does also work on Opera.

Firefox has finally added a property to enable grayscaled antialiasing. After a long discussion it will be available in Version 25 with another syntax, which points out that this property only works on OS X.

-moz-osx-font-smoothing: grayscale;

This should fix blurry icon fonts or light text on dark backgrounds.

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

You may read my post about font rendering on OSX which includes a Sass mixin to handle both properties.

15
votes

Well, Firefox does not support something like that.

In the reference page from Mozilla specifies font-smooth as CSS property controls the application of anti-aliasing when fonts are rendered, but this property has been removed from this specification and is currently not on the standard track.

This property is only supported in Webkit browsers.

If you want an alternative you can check this:

11
votes

Case: Light text with jaggy web font on dark background Firefox (v35)/Windows
Example: Google Web Font Ruda

Surprising solution -
adding following property to the applied selectors:

selector {
    text-shadow: 0 0 0;
}

Actually, result is the same just with text-shadow: 0 0;, but I like to explicitly set blur-radius.

It's not an universal solution, but might help in some cases. Moreover I haven't experienced (also not thoroughly tested) negative performance impacts of this solution so far.

7
votes

After running into the issue, I found out that my WOFF file was not done properly, I sent a new TTF to FontSquirrel which gave me a proper WOFF that was smooth in Firefox without adding any extra CSS to it.

5
votes

I found the solution with this link : http://pixelsvsbytes.com/blog/2013/02/nice-web-fonts-for-every-browser/

Step by step method :

  • send your font to a WebFontGenerator and get the zip
  • find the TTF font on the Zip file
  • then, on linux, do this command (or install by apt-get install ttfautohint):
    ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
  • then, one more, send the new TTF file (neosansstd-black.changed.ttf) on the WebFontGenerator
  • you get a perfect Zip with all your webfonts !

I hope this will help.

4
votes

... in the body tag and these from the content and the typeface looks better in general...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}
3
votes

When the color of text is dark, in Safari and Chrome, I have better result with the text-stroke css property.

-webkit-text-stroke: 0.5px #000;
-4
votes

Adding 

font-weight: normal;

To your @font-face fonts will fix the bold appearance in Firefox.