Rather than trying to debug these issues myself and throwing myself into a blackhole of autosave hell, I’ve just started to (in effect) disable the autosave feature completely. My rationale being that the update button is more than sufficient when wanting to save something that we know we’ve updated.

Below is a quick step by step on how to disable autosave for WordPress version 3 and above. I could be wrong on this but I’m pretty sure that the definition for these settings were held in other files previous to version 3 of WordPress.

Here’s how to do it:

1. Open up ‘wp-includes/default-constants.php’ in your local WordPress file copy.
2. Looks for the following line of code:

if ( !defined( 'AUTOSAVE_INTERVAL' ) )
		define( 'AUTOSAVE_INTERVAL', 60 );

It should be around line 255.
3. Change the 60 following the AUTOSAVE_INTERVAL to a much larger number. The 60 represents 60 seconds. There are 3600 seconds in an hour. So if you changed this to 36000 for example it would only attempt the autosave every 10 hours.
4. Save the file and upload.

This plugin was born out of necessity for me. Having neglected to enable Akismet when I first set the site up I required something that would delete 55,000 comments in one – Yes I would lose some genuine comments due to my laziness but I felt the trade off was acceptable and after enabling Akismet I would be better placed to manage any further comments.

Setup and Usage

1. Upload ‘Bulk_Comment_Removal.php’ to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Find the plugin in the ‘Tools’ menu
4. Tick the checkbox, hit remove and your done.

Future Plans

If there is enough interest in this plugin I would like add date based removal and possibly the option to change comments status to mark them as spam.

Download

Download the ZIP package from here.

One key addition was the introduction of custom post types, used in conjunction with the custom post meta features the two become a very powerful tool for completely custom content authored via WordPress’s excellect UI.

In this very quick tip I’m going to assume that you’ve added a custom post type and have even gotten as far as adding a custom meta box to this post type. I’m then going to assume that you got stuck as I did with adding textareas and allowing for them to be formatted with the same flexibility as the main content area ie. with tinyMCE. So here is what a snippet of your theme’s function.php file will look like by now:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

This may not be an exact copy of your code but yours will look very similar, probably just a little more complex. Now what I wanted todo but couldn’t figure out was how to take the textarea(s) set in the meta box above and add tinyMCE functionality to it. This is the code that I had to add to make it happen:

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");

					}
				});

				/* ]]> */
		</script>

Quite a simple piece of jQuery (already in use across the WordPress admin) that executes on the document being ready that uses the tincyMCE execCommand to add the WYSIWYG editor to one or more textareas using the id of the textarea which you’ll notice is in the function options.

So althogether the code for the metabox in your theme’s function.php will look a little something like this:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");

					}
				});

				/* ]]> */
		</script>

You can also use the execCommand to add tinyMCE to multiple textareas like so:

function meta_options(){
		global $post;
		$custom = get_post_custom($post->ID);
		$mytextarea = $custom["mytextarea"][0];

?>

	<label>My Textarea:</label> <textarea name="mytextarea" id="mytextarea"><?php echo $mytextarea; ?></textarea>

<script type="text/javascript">
				/* <![CDATA[ */

				jQuery(document).ready( function () {
					if ( typeof( tinyMCE ) == "object" && typeof( tinyMCE.execCommand ) == "function" ) {

						tinyMCE.execCommand("mceAddControl", true, "mytextarea");
tinyMCE.execCommand("mceAddControl", true, "mytextarea2");
tinyMCE.execCommand("mceAddControl", true, "mytextarea3");
tinyMCE.execCommand("mceAddControl", true, "mytextarea4");

					}
				});

				/* ]]> */
		</script>

Magneto

Magento was my first port of call as it does look head and shoulders above any other free offering and indeed the feature set looks rich enough to compete with many commercial offerings. What I discovered rather quickly and frustratingly was that Magento is horribly complicated to skin and manipulate. The learning curve of Magento is quite possibly the steepest I have ever come across in open source product. I’d love to get to grips with Magento and really learn the ins and outs but it seems that Magento skinning and tweaking is a skill picked up over the course of months and months rather than days which is really what you need when you are coming into a project that is already on a tight budget.

Magneto Commerce

osCommerce / Zen Cart

osCommerce seems to be going strong after many years of open source development. The issue I always had with osCommerce however is that it feels badly put together and not entirely secure. The organisation of the source files and the admin interface were always pretty shabby. Now in osCommerce’ defence the last time I used a release was many years ago but unless there has been a complete overhaul I can’t see this being much improved over that version.

Similarly Zen Cart seems to suffer the same fate. The admin interface screams osCommerce and if Zen Cart is simply osCommerce re-labeled (not confirmed but likely) it will more than likely have osCommerce like issues.

osCommerce | Zen Cart

Cubecart / X-Cart and similar

Cubecart, X-Cart and similar sit on on a level above the free offerings but below the full blown commercial offerings. They are solid products but are still commercial offerings which deduct, however minor, from a project’s budget. Had I not found the next open source product in this list I would have probably stumped for one of these or one of there many derivatives which are all fairly similar in features and set-up. Again solid offerings but not within the open source range.

CubeCart | X-Cart

OpenCart

My saviour. Quite frankly not a great deal seems to have changed with regards to open source ecommerce products since the break through of Magento apart from this neat piece of development.

The structure of OpenCart follows MVC, Model View Controller and in general the code is nicely put together and feels clean as well as secure. Following the MVC convention makes OpenCart as flexible and as complex as you need or want it to be. The admin interface is clean and rather aesthetically pleasing whilst being packed with features.

The only grumble I have over OpenCart is that it’s realtively young and as such the community and documentation is not quite on par with say, Magento or osCommerce. As the product matures however I am sure that this will only improve.

The most impressive feature of OpenCart is without doubt the lack of bloat. Possibly a positive knock on affect of its young age, the simplicity of the code and the way it is structured in comparison with the punch it packs is quite glorious.

OpenCart

In Summary

As I’ve mentioned above major players in the open source community don’t come and go overnight particularly not in a category as crucial as ecommerce development. So it wasn’t particularly surprising to find that there was not a great number of new stable ecommerce offerings to choose from.

Magento I feel is a definite market leader and something that every self respecting developer should take the time to understand if they are working regularly with ecommerce projects that require open source assistance. OpenCart for my money however can not be beaten for feature set versus learning curve. OpenCart apart from the usual road bumps in using a new open source package has been delightful and will be a project I keep an eye on for any future ecommerce projects.

If I’ve missed any great open source eccomerce offerings, please do let me know in the comments or via the contact page.

The design is based around swooping lines and curves. The homepage features an enlarged header that shows the latest post on its own but delve deeper and the latest blog post header disappears on all inside pages to enhance readability.

Setup Instructions

Set this theme up the exact way you would any other theme and then activate it.

Once you have activated the theme I suggest you create three static pages. One for the about page, one for the contact page and then a third for the archives. The archives page will need to set to use the ‘Archives’ template and you can then customise this section to your personal preference.

Just to recap once you have activated the theme created the following pages with the exact url’s as listed below:

• About – /about
• Contact – /contact
• Archives – /archives – using the template ‘Archives’

You can change the titles and the contents of each of the three pages just as long as the url slug stays as listed above.

Download Notes

This download is 100% free with no restrictions at all. The only thing I ask is for the credit in the footer of the template to remain intact or at least a linkback from somewhere else on your site if you use this template.

Contained within the zip package you’ll find a resource folder that contains the font used for the demo site as well as any relevant image sprites that you may need to edit.

Browser Compatibility

The template has been tested and works perfectly on the following browsers:

• FF 3.0+
• Safari
• Internet Explorer 7+
• Google Chrome

If you find any issues that you want to bring to my attention feel free to drop me a line in the comments or see the about page for contact information.

Demo & Download

• Zip Package
• Live Demo (External Site)

If you use this theme, please let me know so I can link to it from here as an example.

FAQ

None to date.

Now I’m not exactly an early adopter when it comes to social tools. I have a Twitter account that I seldom use. Although the concept of Twitter interests me the lack of desire unfortunately leaves me with a sparse account page with no followers or followees.

Again my interest was aroused in a similar way yesterday when I awoke to find that the new Buzz feature had been added automatically to my Google Mail account. After poking around for a few minutes I soon discovered what it was all about. Admittedly if there was a big banner in the UI that said “Buzz is Twitter but with videos and images in line as well as integration with your inbox” the penny would have dropped sooner. I think because of the striking similarities to Twitter it actually took me longer to work out what Buzz was. I was looking around for something that wasn’t to there to be found ie. something so different it wasn’t just twitter with caveats. Note – I still haven’t got my head around the public facing profile side of Google Mail, how it ties into your Google Account etc.

So what I was looking at was a Twitter clone with bells and whistles. That’s not to say that Buzz doesn’t offer an improved service to Twitter. The promise of the precise locating and review tools Ala Foursquare are certainly exciting as are many other improvements over Twitter. I love the fact that you can follow a conversation between two users on the same page. Incidentally the improved functionality of comments in comparison to Twitter brings me to one of the little annoyances of Google Buzz. It’s messy! Surely Google could have spent a little bit of time and added a little bit of shine to the public facing profiles. I mean look at the way the comments are formatted, how much time would have really taken to have just place a dividing line between one comment and the next or alternating row colours.

I saw a great tweet on the subject, it went something like “Google Buzz just looks like a messy version of Twitter”. Is this going to be the general consensus among Twitter users? If so Google need to fix it because lets face it Buzz’s early success will depend on Twitter users jumping ship. Will Twitter users actually use two micro-blogging social networks? I can’t see it.

This brings me to the reason why I’m personally going to hang-fire on Google Buzz for the time being. People have spent time building up relationships and followings on Twitter and with no import feature and no way of carrying that over to Google Mail I don’t think many people will be interested in making a switch just yet. Nor (as I stated earlier) do I think people are going to use two services as similar as Buzz and Twitter at the same time.

It is going to be interesting to see how this one shapes up over the coming months. I think we’ll get a similar divide between the two as we did with Facebook and Myspace but who’ll come out on top is much less obvious this time around as both offer such quality services. If Google can convince the everyday email user that Buzz isn’t a waste of their time then Buzz could become the every-man’s Twitter and Twitter may become a niche community, Twitter a nice community?! Well stranger things have happened.

My ‘beef’ is not with CSS3 itself but more with the countless lists of cool stuff you can do with CSS3. As a language adds more and more features and the complexity of the code expands there needs to be some grounding. Those that know CSS and know it well will already but fully aware of the great additions CSS3 adds to the previous versions. Those that don’t know CSS too well are just being fed more and more code to copy and paste and this is where the problem starts.

CSS3 isn’t a new language that replaces the previous versions of CSS, it is merely an enhancement, an improvement of what has come before it. The original ideas and the underlying philosophies are still the same. With the limitations of CSS decreasing, the opportunity for sloppy, bloated code increases. The original premise of CSS of course being lean code that separates presentation and layout.

I suppose the point I’m trying to get at is that as a community we should still be encouraging people to go back and understand the basics of CSS before writing up another list of ‘cool’ techniques using CSS3. Les’ we forget that CSS3 is still a good few years away from being a viable language that is usable cross browser. Progressive enhancement you say? Folk concerned with progressive enhancement don’t need another ‘cool’ list, they’re already there, they aren’t reading these ‘cool’ lists posts because they don’t need to.

Over the years I’ve been ‘at the helm’ of a fair few web sites, some good, some bad but most returning revenue in some form.

I’m genuinely un-fussed as a visitor if I arrive at a site with tasteful advertisements tucked away in the sidebar. Even sites that are completely loaded with advertisements that have great content don’t particularly bother me.

Obviously I would consider myself a little more clued-up than an average visitor but then this post is directed at design or development blog owners looking to monetize their content.

How, when, where and why you should display advertisements on your design or development blog are decisions entirely down to you. My opinion on the subject is simple, if done tastefully and with the right motives your audience will respect the decision to monetize the content you’ve worked hard to bring them.

Below I’ve produced a write-up of each advertisement network or revenue source I’ve come across that are applicable to design or development resource and blog sites. With each write-up I’ll give you my experience with the network, what type of advertisements they offer, likeliness of being accepted and payout information that may help you get a better return from the network or revenue source.

Note: A few, if not, all of the links outgoing to networks and revenue sources from this post will be referal links. To those who are unaware, these links mean that if you go on start earning with the sites I’ve recommended I’ll receive a nice bonus from them myself for refering you. If you think this is unreasonable and I’m a greedy so and so then I’m sure you can find a way to the sites directly.

Sponsored Tweets
Type of ads : Tweets
An extremely interesting network especially for the designers and developers of the web. This network does exactly what it says on the tin. It allows to you sell sponsored tweets to advertisers. Heck! you don’t even need to have a web site to use Sponsored Tweets. They have a lot of celebrities on their books at present and the more followers you have on twitter, the better payouts you are likely to receive. The price per tweet is extremely good for this network. You will need to have 100 tweets, 100 followers and have an account over 60 days old to be publicized in the advertiser directory but you can still sign up if you don’t meet these requirements for possible direct offers. Highly recommended.

Amazon.co.uk & Amazon.com
Type of ads : Commission based referrals
An ol’ cornerstone of the web, Amazon.com and the co.uk variant allow you to sign up to their associates program and promote products they have in stock for a percentage of any sale that is made from said promotion. Its quick and easy to get started with them and the acceptance criteria is very low. Where Amazon come in pretty handy for design and development web sites is their great range of books related to the subject of design and development. The referral fee per product varies slightly but it usually sits between 5 and 10% of the sold product value.

Peerfly.com
Type of ads : CPA
A personal favourite of mine – Peerfly are starting to gain a big reputation amongst web site owners. Their payment model maybe a little different from what most design and development blog and site owners are used too. With that said the potential rewards for your visitors and indeed yourself as the site owner are good. Peerfly are a Cost Per Action network which means that their advertisers will pay you when one of your visitors fulfill a predefined action on their web site. This can be a simple as one of your visitors entering their email address for a macbook competition (which is an offer available right now). Payouts vary depending on the types of offer but if your looking for a different type of ad network than the crowd Peerfly are very much recommended.

Google Adsense
Type of ads : CPC (mainly)
Google Adsense are second to none the in the advertisement network stakes. The acceptance criteria is also one that 99% of web sites should fulfill with ease. They offer a range of advertising types to help monetize your design or development sites but by far their most popular are the Cost Per Click adverts. Google Adsense have also recently added mobile phone specific advertisements and advertisements for feeds, which are perfect for design or development web sites with a big readership. Your earning power with Google Adsense will vary from page to page as it is completely dependant on which keywords Google find in each of your pages. All in all with the low acceptance barrier and not forgetting the highly customizable adverts Adsense is a good choice for any web design or development site. Google Adsense offer a variety of payment options.

Type of ads : Text Links
Text Link Ads are a great network I’ve used on a number of occasions. They allow you to drop a block of Javascript code into your pages and then they will broker for you in getting advertisers to purchase text links on these pages. The higher pagerank your web site has the better the going rate will be for your text link real estate. Page rank really is the key with this network to getting the best price for your advertisements. A nice bonus is the extremely usable interface that Text Link Ads provide for publishers, that not only allows you to switch between Advertiser or Publisher but also allows you to manage multiple web sites from one account. Payment options are cheque or paypal.

Inlinks
Type of ads : Inline Text Links
A different type of advertisement offered to any of the other networks featured in this post. inLinks allow you to sell individual words and sentences in your posts to advertisers. They allow a high level of customization and control over what you sell and what it looks like so the advertisements are less likely to make a pig’s ear of your valuable content. Used correctly inLinks can be a constant yet subtle source of income for your design or development blog. Payment is via Paypal or Cheque.Update: May now be dead

Buysellads.com
Type of ads : CPM
Buysellads.com are relatively new in comparison with some of the other networks listed here. They are responsible for some, if not most of the side image advertisements across design and development web sites. At the time of writing I’d take a punt and say they were the leaders in design and development blog and web site advertising. They have a very high standard of sites under their control and you may find it hard to become an accepted publisher if you are new or have low traffic numbers. Using their administration area you can designate specific ad areas that you would like to offer potential advertisers. Buysellads.com then act as a broker for setting up the relationship between yourself and the advertiser. They do take a slightly larger cut of your agreed price with any advertiser but are fast becoming the most reputable design and development advertising network.

Adbrite.com
Type of ads : CPC, CPM
Adbrite are a Buysellads.com alternative that do a very good job of selling advertisements for their members. Again the return for your site will be dependant on the size but if you need a network similar to Buysellads.com that doesn’t have as higher acceptance barrier then Adbrite will serve you well. Adbrite also have a wider range of advertising options such as Pay Per Click as opposed to the set time periods of Buysellads.com.

AdToll
Type of ads : CPC, CPM and more
Adtoll are seen as a viable alternative to Buysellads.com and there high acceptance standard. They are also similar to Adbrite. Site owners signing up to Adtoll can expect to be accepted 99% of the time but may find it harder to sell space on there site that they would on Buysellads.com. Payout rates will again depend on the size and popularity of your site. Adtoll offer a range of options for you as a site owner so head over now and take a look.Update: Involved in merger recently, waiting on results from this.

Pay Per Post
Type of ads : Pay Per Post
This is one more for the bloggers. Pay Per Post should be pretty self explanatory, you sign up and get paid to make postings on your blog that either review or link to a company or product. The payouts really do differ based on a number of factors such as pagerank and readership. Payments are made via Pay Pal and quite honestly I’ve had mixed experiences with Pay Per Post but would definitely recommend you give it a try.

If you have any experiences with the above networks or would like to suggest one of your own that would be useful to design or development web site owners please leave them in the comments.

My original fix, like many, was born out of pure necessisity. I needed a solution to allow me to present smoother embedded type faces for Internet Explorer. What I found, I shared and hopefully it’s been of much to use to people.

On Firefox & Safari

Despite being able to disable ClearType in Internet Explorer it would seem there is no way to do the same in Firefox or Safari. This leaves an issue in Windows Vista and Windows 7 as they have ClearType forced on system wide by default unlike Windows XP. Dependant on your Firefox/Safari visitor percentage this may not be an issue. Some fonts do however fare better …

Hinting

A major factor in how well your font face will render under ClearType is to do with how well the font is hinted. Some are good, some are bad and some just aren’t ready or were never intended to be rendered on screen using embedding techniques. Again the only real way to determine this is by thorough testing. Font Dragr is a fantastic tool for quick testing of fonts and how well they embed. Also be sure to take a look at Front Friend.

Current Solutions

Unfortunately there isn’t anything that can be done right now for Firefox and Safari in terms of disabling ClearType. The key at the moment is selecting a well hinted font face and tireless testing. Experimenting with text-shadow has produced mixed results for me but I’d definitely recommend you give it a try. It may help alleviate some of the jagged nastiness should you come across it. For this you may also want to look into detecting if font smoothing is actually being applied on your visitors machines. There’s a great piece of Javascript that you can use for this here.

Future Solutions

As always there are people and organisations already working towards fixing these issues. More and more fonts are being reworked and properly hinted for embedding purposes. Below I’ve outlined two other solutions/advancements that may be of interest.

CSS 3 – font-smooth

A little known part of the CSS 3 specification and as of now completely unsupported by any browser is the CSS font-smooth property. Reasons why this is unsupported could and probably are complex and varied. This being implemented even just in Firefox could be a godsend for front end developers dealing with the issues mentioned in this post. See more about font-smooth here. As yet there hasn’t be any news of when and indeed if this will ever be supported by browser makers.

DirectWrite rather than GDI

This advancement is a little more technical than a simple CSS property but does look promising. This tip comes courtesy of Charles Roper in the IE7/8 ClearType fix article comments.

From what I understand, at present ClearType is currently implemented using a GDI technology which isn’t great at anti-aliasing the Y-axis of embedded font faces. An innovate alternative which is currently planned for use in FireFox 3.7 and Internet Explorer 9 using DirectWrite improves substantially on this. Some writeups and examples are presented at the links below:

• GDI vs DirectWrite
• Better Postscript CFF font rendering with DirectWrite

Also interestingly a browser using DirectWrite over GDI can use a fix to disable ClearType. I’ll post more on that at the time. At the moment both Firefox 3.7 and IE 9 look a while off.

If you have anything to add to the above please feel free to add in the comments.

One thing however that has always bothered me is IE7 and IE8′s rendering of embedded fonts, so today with IE tester at hand and google ready to get wild I vowed to come up with a solution and I think I may just have.

First off a quick recap

If you haven’t already read my previous postings on @font-face I’d like to direct you to the following two posts:

• Revisiting @font-face introduces font embedding options right now.
• Embedding fonts using @font-face is a guide to using fontsquirrel.com’s previously mention @font-face generator

Now let me illustrate the problem.

When embedding using @font-face IE6 (surprisingly) renders the type face perfectly as does Firefox and Safari but IE7 and IE8 serve up a sub-standard jagged font face that is really not pretty to look at.

Take a look at the first demo page for a simple example of a custom font-face that has been embedded. If you can, take a look at this page in both Firefox and either IE7 or 8 to see the difference.

What causes this?

After much research I discovered the problem was being caused by Microsoft’s ClearType functionality. ClearType is designed and very much works to make rendered text online and throughout the windows system clearer to read. That’s great for body text and like I say it does work but when it comes to custom fonts that have been embedded ClearType is attempting to do a job which isn’t needed. This is what gives us the sharp, jagged looking font face that we don’t want. Because we want nicely anti-aliased text like we see in Firefox, IE6 and Safari.

As a side note I’m assuming that IE6 never had the functionality to render ClearType functionality and uses some other sort of properietary technology, leading to nicely embedded fonts in IE6 in a perverse sort of way.

Update: For IE6, Windows XP does not force ClearType on in the browser and Windows Vista was shipped with IE7 pre-installed (falling into the bracket of our fix) therefore the risk of IE6 users being exposed to ClearType issues is minimal.

How to fix this

The good news is that there is a way to disable ClearType via the browser when visitors are viewing your web site. Now I’m not recommending this for any other use than what I’m demonstrating today, in general ClearType gets it right and helps visitors read your site the way it was meant to be read. Disabling ClearType in most circumstances leads to horribly rendered body text and a whole help of problems for your visitors eyes.

The process of disabling ClearType

Internet Explorer as a rule do not apply ClearType to elements using their proprietary CSS filters as they can conflict and result in wider issues for the browser so we can exploit this to make Internet Explorer leave our embedded fonts alone. Now unfortunately there a few subtle differences between the browser that mean we can’t simply apply a useless filter and move on.

Take a look at the second demo page where I’ve added a few additional fixes for IE7 and 8. Go ahead and take a look in both Firefox and IE7/8, you should now find a much nicer rendering of the font in IE. I’ll break down what’s been added below.

The crux of the fix:

h2, p {font: 36px/44px 'OldSansBlackRegular', Arial, sans-serif;letter-spacing: 0;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);zoom:1;}

The above snippet of CSS fixes our smoothing issues in both IE7 and IE8 as seen in the previously linked demo page. The key to this is filter CSS property and the zoom property which are only applicable to Internet Explorer.

Looking at the filter property

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/headers/hIEfix.png,sizingMethod=crop);

This part is mostly for IE8, both IE7 and 8 need to have a filter present to disable ClearType but IE8 has to have this filter actual doing something to recognise it. I also noticed when testing that without a background image being present in IE8 the ClearType disable had little effect. So what this filter property does in effect is kill two birds with one stone. We add a filter which checks the required boxes for IE7 and 8 as well as adding a one by one transparent png image to satisfy IE8.

Looking at the zoom property

zoom:1;

This is solely for IE7. It fixes an issue with hasLayout. If you don’t know anything about hasLayout then not to worry. Essentially IE filters can’t be assigned to any element that doesn’t have ‘layout’ so the zoom:1 property gives our headers ‘layout’. hasLayout is only applicable to IE version 7 and lower as it was dropped from IE8 (thankfully). To learn more about hasLayout see here.

Done and dusted

So in future when embedding fonts using @font-face you can use two simple IE only CSS properties and a 1 by 1 transparent png to give your fonts that anti-alias effect in IE7/8. You can even place these two properties in a separate IE only stylesheet as we are doing nothing else apart from tweaking the styles.

Just to note that as with any workaround you’ll need to test this on a site by site basis to ensure the fix is giving you the results you want. Even with this tweak font rendering in IE can still be unpredictable so testing and constant tweaking is a must!

File Summary

• First Demo Page – Showing an untouched @font-face embedding example.
• Second Demo Page – Showing a @font-face embedding example including the CSS fix.
• ZIP package – Containing both example pages and source files.
• jQuery plugin – Quick and easy jQuery plugin to achieve this fix.

Your viewing this article on allcreatives.net – the web design focused blog.

Update : Follow up post on ClearType issues in Firefox and Safari.