Webfont Smoothing and Antialiasing in Firefox and Opera

Question

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?

It would be a good idea to stop doing that and read why here: http://www.usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/ — fregante, Mar 18 '13 at 14:44
^ 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, Apr 08 '14 at 14:08
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, Apr 28 '14 at 01:55
My web fonts that are dark on light backgrounds are getting "faux bolded" as well. I say "antialiased" all around. — Jason, Jun 05 '14 at 19:18
the usability post above is in support of the op. Chrome and Safari on Mac use subpixel smooting instead of antialiased as a DEFAULT. For a company that touts it's design sense, Apple sure doesn't get it with antialiasing. I guess that's why they keep squeezing in more pixels per inch. You get enough and this doesn't matter anymore. — Paul Fox, Oct 21 '14 at 20:20
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, Feb 16 '15 at 03:25
That is why I set `gfx.downloadable_fonts.enabled` to `false` in FF. Now, text became readable even in size 4-8 px on a 24" display with 1920x1600. Letters became sharpen, legible, thin and pixel-wide. Now, there is no blurred antialiased text, which makes text difficult to read. If special graphical symbols that are embedded into a custom font are not present in a standard system font like Tahoma, Verdana or Arial, then I just ignore such unprintable symbols or websites at all. — Aleksey F., Jun 16 '16 at 19:34

Max Hoffmann · Answer 1 · 2020-10-02T19:53:53.770

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.

Windows and Linux use different rendering algorithms for fonts than OSX. — Max Hoffmann, Dec 29 '13 at 14:41

score 15 · Answer 2 · edited Oct 23 '14 at 08:08

15

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:

edited Oct 23 '14 at 08:08

blade19899

727
1
8
32

answered Jul 12 '12 at 20:27

Jonathan Naguin

14,526
6
46
75

2

Well, the problem I have is that my fonts look to "bold" and bloated in firefox and opera. With `-webkit-font-smoothing:antialiased;` I could fix it in Safari and Chrome. I'd love to find any "hack" to make my fonts a little bit lighter in Firefox as well. I thought of applying a white `text-shadow` to it in moz only but there is no way to apply a "inset" text-shadow that would make the font lighter. – matt Jul 12 '12 at 20:50
1

@matt You can try some CSS advices in this question: http://stackoverflow.com/questions/761778/forcing-anti-aliasing-using-css-is-this-a-myth Maybe you find some CSS alternative. – Jonathan Naguin Jul 12 '12 at 21:02

score 11 · Answer 3 · answered Feb 06 '15 at 22:50

11

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.

answered Feb 06 '15 at 22:50

Volker E.

5,911
11
47
64

Does nothing in helping – vsync Sep 03 '15 at 09:52
this will cause bolder fonts on chrome based on the font – Ben Sewards Oct 15 '15 at 17:38
1

@BenSewards Would you provide a font where you ran into getting bolder font rendering? Or maybe even a CodePen? Thanks in advance. – Volker E. Jan 11 '16 at 00:41
1

@VolkerE. thanks for the great solution. I've the same annoying problem with the Source Code Pro Font in a Sticky Header. When I scroll the font get's very small and with your text-shadow the font doesn't make any problems. – Evolutio Mar 16 '16 at 14:30
On current chrome (58.0.3029.110) the "smooth" text actually looks _really_ horrible. (the "jaggy" text is somewhat better) – RecursiveExceptionException May 27 '17 at 01:10

score 7 · Answer 4 · answered Oct 03 '13 at 14:49

7

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.

answered Oct 03 '13 at 14:49

azenet

379
1
6
14

is it in windows? – Vignesh Mar 20 '18 at 13:34

score 5 · Answer 5 · edited Feb 15 '15 at 18:49

5

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.

edited Feb 15 '15 at 18:49

Volker E.

5,911
11
47
64

answered Sep 05 '14 at 17:32

Plici Stéphane

291
5
3

Did a great job in fixing font jagging during css-transitions (though not removed it completely). I used FontSquirrel generator with TTFAutohint option – Andrey Oct 25 '15 at 16:43
I used Fontie to re-generate my WOFF, WOFF2, EOT and SVG files with autohint for Windows enabled. – Dominique Jun 01 '17 at 16:31

user3634787 · Answer 6 · 2015-01-05T01:08:01.370

4

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

}

edited Jan 05 '15 at 01:08

answered Jan 02 '15 at 17:58

user3634787

51
4

2

I'm sorry... what is "reinschreiben"? Most of us don't speak German, so it'd be nice if you made your entire post in English. – rayryeng Jan 02 '15 at 18:15
3

Oh please, I apologize had translated with Google and somehow the wrong word since slipped :) – user3634787 Jan 05 '15 at 01:14

score 3 · Answer 7 · answered Jul 29 '14 at 18:17

3

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;

answered Jul 29 '14 at 18:17

Christelle

109
6

The question is about Firefox and Opera. so this answer has nothing to do with the question – vsync Sep 03 '15 at 09:53

score -4 · Answer 8 · answered Jun 07 '13 at 01:57

-4

Adding

font-weight: normal;

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

answered Jun 07 '13 at 01:57

Aaron VIII

43
4

7

`font-weight` (unsurprisingly) affects font weight, not font smoothing. Adding it to @font-face declarations will cause confusion if the linked font file is not a normal-weight font file. – Mike Meyer Nov 12 '13 at 05:17
@MikeMeyer Actually I agree with Aaron's comment. Adding font-weight: normal to a font include that is a "light" font would *seem* to add confusion, but it should only confuse the novice developer. It's actually good practice to specify a default of normal in my experience. Normal in this case refers to "normal" for the included font and the characters being used, and is not intended to specify information about the font face itself. In many cases it'll (particularly on large platforms) reduce the likelihood of bugs coming from the all-too-typical bad architecture you see around font styles. – dudewad Aug 27 '14 at 20:39
In fact, the name of the font face itself should denote the weight of the font by default...! – dudewad Aug 27 '14 at 20:42
@dudewad that’s great that you agree, and yeah, it’s a decent (though rather tersely-worded) “pro-tip” about `font-weight`. Thing is, OP wasn’t asking about `font-weight`—he was asking about _antialiasing_. This is a correct answer for a completely different question. – Mike Meyer Aug 28 '14 at 08:08
@MikeMeyer you're totally right. I get a little carried away sometimes. ;) – dudewad Sep 02 '14 at 17:38

Webfont Smoothing and Antialiasing in Firefox and Opera

8 Answers8

Linked