Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Techniques for Anti-Aliasing @font-face on Windows

#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

##CSS3 font-smooth


font-smooth: always;

##A Little Twist


transform: rotate(-0.0000000001deg)

##Force Subpixel Anti-Aliasing


-webkit-font-smoothing: subpixel-antialiased;

##Use text-shadow to Hide Aliasing


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


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:
		if ('rgb') == -1 )

		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 ^
Copy link

ulialterego commented Jun 11, 2012

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

Copy link

dalethedeveloper commented Jun 12, 2012

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

Copy link

ulialterego commented Jun 12, 2012

It's working now. Thanks

Copy link

chandra-1993 commented Dec 6, 2012

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

Copy link

Greywacke commented Feb 19, 2013

the jquery does not seem to work on the bigcommerce site 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

Copy link

thers commented Mar 5, 2013

Just found a way to make your text very smooth and rounded in appearance :)

Copy link

mattshade commented Jun 4, 2013

Thanks this works!

Copy link

jfcartier commented Aug 9, 2013


Copy link

ewwink commented Dec 26, 2013

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

{'rgba(0,0,0,0.31) 0px 0px 1px';

Copy link

muslih commented Jan 14, 2014

Thank you very much :)

Copy link

zdolny commented Feb 5, 2014

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

Copy link

ghost commented May 20, 2014

Source Sans in Firefox, Chrome and IE11, respectively:

Copy link

alexmccabe commented Aug 14, 2014

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.

Copy link

oakaigh commented Apr 24, 2019

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

works for me.

Copy link

bm2ilabs commented Mar 25, 2021

Thank you it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment