Skip to content

Instantly share code, notes, and snippets.

@dalethedeveloper
Created February 16, 2012 17:18
Show Gist options
  • Save dalethedeveloper/1846552 to your computer and use it in GitHub Desktop.
Save dalethedeveloper/1846552 to your computer and use it in GitHub Desktop.
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
Copy link

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

@dalethedeveloper
Copy link
Author

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

@ulialterego
Copy link

It's working now. Thanks

@chandra-1993
Copy link

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

@Greywacke
Copy link

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

thers commented Mar 5, 2013

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

@mattshade
Copy link

Thanks this works!

@jfcartier
Copy link

thanks

@ewwink
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

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

@muslih
Copy link

muslih commented Jan 14, 2014

Thank you very much :)

@zdolny
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

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

@alexmccabe
Copy link

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.

@oakaigh
Copy link

oakaigh commented Apr 24, 2019

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

works for me.

@bm2ilabs
Copy link

Thank you it works

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