Skip to content

Instantly share code, notes, and snippets.

Embed
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 http://stackoverflow.com/questions/3451541/css-font-face-anti-aliasing.

##CSS3 font-smooth

Code:

font-smooth: always;

##A Little Twist

Code:

transform: rotate(-0.0000000001deg)

##Force Subpixel Anti-Aliasing

Code:

-webkit-font-smoothing: subpixel-antialiased;

##Use text-shadow to Hide Aliasing

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 ^
});
@ulialterego

This comment has been minimized.

Copy link

commented Jun 11, 2012

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

@dalethedeveloper

This comment has been minimized.

Copy link
Owner Author

commented Jun 12, 2012

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

@ulialterego

This comment has been minimized.

Copy link

commented Jun 12, 2012

It's working now. Thanks

@chandra-1993

This comment has been minimized.

Copy link

commented Dec 6, 2012

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

@Greywacke

This comment has been minimized.

Copy link

commented Feb 19, 2013

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

@thers

This comment has been minimized.

Copy link

commented Mar 5, 2013

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

@mattshade

This comment has been minimized.

Copy link

commented Jun 4, 2013

Thanks this works!

@jfcartier

This comment has been minimized.

Copy link

commented Aug 9, 2013

thanks

@ewwink

This comment has been minimized.

Copy link

commented Dec 26, 2013

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';
}
@muslih

This comment has been minimized.

Copy link

commented Jan 14, 2014

Thank you very much :)

@zdolny

This comment has been minimized.

Copy link

commented Feb 5, 2014

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

@ghost

This comment has been minimized.

Copy link

commented May 20, 2014

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

@alexmccabe

This comment has been minimized.

Copy link

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.

@PantherJohn

This comment has been minimized.

Copy link

commented Apr 24, 2019

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

works for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.