• Home
• Archives
• Tools   Resources
• About Allcreatives

This plugin is a simple fix for anyone having issues in IE7 and 8 when embedding custom fonts using the @font-face selector. Microsoft’s ClearType functionality can at times cause embedded fonts to render hard and jagged as opposed to smooth and anti-aliased.

You can see the article that this plugin originates from here. If you can also interested in a little more back story see this post and this post.

This plugin will work in jQuery version 1.3+ and will automatically detect the user’s browser to ensure the plugin is only applied in IE 7 and 8.

Demo

Take a look at the following two demo pages in either IE7 or IE8, one is using the ClearType plugin and one is not to show the difference this plugin can make to rendering:

• Demo One – Embedding without plugin.
• Demo Two – Embedding with the plugin.

Downloading and Using the plugin

Download

• Download IE @font-face ClearType fix V0.1 here

Usage

First you need to have a copy of jQuery (V1.3+) included within the page you want to use IE @font-face ClearType fix on, then you need to call the ClearType fix Javascript file included within the download.

Including jQuery and ClearType fix

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="IEffembedfix.jQuery.js"></script>

Next you need to call the function of any page you want to apply the ClearType and also tell the plugin which elements you want to apply the fix.

Calling the ClearType fix and setting elements

<script type="text/javascript">
    $(document).ready(function(){

		$("h2, p").ieffembedfix();

	});
    </script>

Change the h2, p selectors in the above snippet to whichever elements you wish the ClearType fix to be applied to.

Configuarion

There is only one configuration option in the current version of the IE ClearType fix. This is for the location of the hIEfix.png file included with the plugin. If you have moved this file into your image folder for example you will need to let the plugin know its location.

Open IEffembedfix.jQuery.js and look for the following lines

// CONFIGURE THE PATH TO YOUR 1BY1 PNG HERE, RELATIVE TO THE LOCATION OF THIS JS FILE.
var pngimgurl = "hIEfix.png";

You will need to replace the default hIEfix.png to match the location of your image file.

For example if hIEfix.png was in a folder named images

// CONFIGURE THE PATH TO YOUR 1BY1 PNG HERE, RELATIVE TO THE LOCATION OF THIS JS FILE.
var pngimgurl = "images/hIEfix.png";

FAQ

None yet, if you have a question please feel free to get in touch and I’ll add your question here for the benefit of other users if its relevant.

Change Log

V0.1 – First Release

License

The IE font-face ClearType fix plugin is dual licensed under the MIT and GPL licenses.

File recap

• Demo One – Embedding without plugin.
• Demo Two – Embedding with the plugin.
• Complete Package

Grab our RSS feed for more of the same ...