Techniques for Anti-Aliasing @font-face on Windows

gistfile1.md

#Techniques for Anti-Aliasing @font-face on Windows

It all started with an email from a client: Do these fonts look funky to you? The title is prickly.

The font in question was Port Lligat Sans from Google Web Fonts.

The "prickly" is aliasing caused by lack of hinting

Turns out that several @font-face selections do not contain hinting to make them buttery smooth on Windows even though Mac and Linux are fine. Even those at Font Squirrel and Google Fonts. This led to http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing.

##CSS3 font-smooth

• Source: http://www.w3.org/TR/WD-font/#font-smooth
• Idea: Use a baked in tag to make the browser's rendering engine handle the dirty work

Code:

font-smooth: always;

##A Little Twist

• Source: http://willmoyer.com/plato/
• Idea: Give the font a slight CSS3 tilt to rotate jagged edges away from pixels

Code:

transform: rotate(-0.0000000001deg)

##Force Subpixel Anti-Aliasing

• Source: http://maxvoltar.com/archive/-webkit-font-smoothing
• Idea: Use a vendor specific tag to force webkit browsers to smooth things out

Code:

-webkit-font-smoothing: subpixel-antialiased;

##Use text-shadow to Hide Aliasing

• Source: http://www.elfboy.com/blog/text-shadow_anti-aliasing/
• Idea: Add an alpha faded 'fuzziness' with text-shadow to hide jagged edges

Code:

text-shadow: 0 0 1px rgba(0,0,0,0.3);

#Verdict

On Windows 7 with IE9, FF10, and Chrome16 the winner is...text-shadow. None of the other options worked to any degree with font-smooth completely unsupported, transform not being consistent, and the -webkit-font-smoothing being a vendor specific tag (and it still didn't work).

text-shadow fuzzing abates the aliasing

The trick now is only applying this property to Windows browsers. jQuery to the clumsy, awkward rescue.

jQuery(document).ready(function($) { 
	var shadowify = function (e) {
		var color = jQuery(e).css('color'),
			size  = jQuery(e).css('font-size');

		// Got Hex color?  Modify with: http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery
		if ( color.search('rgb') == -1 )
			return;

		var rgba = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+))?\)$/);
		jQuery(e).css('text-shadow', '0 0 1px rgba('+rgba[1]+','+rgba[2]+','+rgba[3]+',1)');

	// To use calculated shadow of say, 1/15th of the font height 
	//var fsize = size.match(/(\d+)px/);
	//jQuery(e).css('text-shadow', '0 0 '+(fsize[1]/15)+'px rgba('+rgba[1]+','+rgba[2]+','+rgba[3]+',0.3)')
	}


	if(navigator.platform.indexOf('Win') != -1)
		$('.menu a,#header_right a,.event_title a, h1 a, h2 a').each(function(){shadowify(this)});
		//^ Your appropriately targeted list of elements here ^
});

I'm getting "Uncaught ReferenceError: rgb is not defined " on console. what is wrong?

Updated - that function was badly written. Give this a try.

It's working now. Thanks

It's not work on my browser. Chrome:23

the jquery does not seem to work on the bigcommerce site www.obros.co.za when implemented in the end of the footer for the current theme. where/how should i implement this exactly?

the site is currently using the 'Montserrat' google font.

ok have implemented the css changes too - and now they seem to work, but not to the extent as shown above with

Just found a way to make your text very smooth and rounded in appearance :) http://cdpn.io/mflbq

Thanks this works!

thanks

using shadow on firefox produce bad apperance so I'm using only on Chrome and Opera with javascript

if(navigator.userAgent.match(/chrome|opera/i))
{
  document.body.style.textShadow='rgba(0,0,0,0.31) 0px 0px 1px';
}

Thank you very much :)

my technique is to load .svg font first in the @font-face syntax, works for me

T__T
Source Sans in Firefox, Chrome and IE11, respectively:
http://1drv.ms/1h1VRBO

I like this idea, but I found it much better to not add a text-shadow but instead increase the font-weight. This is better for people using ultra-light weight fonts. I.e. font-weight: 100. This definitely depends on the type-face however. If you have horrible aliased fonts then use the text-shadow.

    color: transparent;
    text-shadow: 0 0 0.7px black;

works for me.

Thank you it works