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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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    Text-Shadow Anti-Aliasing   Philip Renich  Websites - blog cuf  n - fonts for the people

User · Answer

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

User · Answer

Adding   font-weight  normal    To your  font-face fonts will fix the bold appearance in Firefox

User · Answer

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

User · Answer

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

[css] Webfont Smoothing and Antialiasing in Firefox and Opera

Examples related to css

Examples related to fonts

Examples related to webfonts

Examples related to antialiasing