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.

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.

The process, thanks to fontsquirrel’s @font-face generator is now quite straight forward. If you are unsure of what @font-face actually is and what all the fuss is about then hop over the fonts category and take a look at my last two recent posts on the subject. Using the aforementioned generator we should be able to achieve @font-face perfection is two simple steps.

Step 1 : Get your @font-face kit

Font Squirrel have a great resource for prepackaged @font-face kits which are available here otherwise you can take a font you have already on your system and run it through the @font-face generator.  Just to note that you will have to check the license agreement for any font you use with this generator to make sure you are legally allowed to embed it.

Now following the steps on the generator page you should now be presented with download package. Take this, download, unzip and then re-upload the font files contained to your web hosting under a sub-directory such as fonts. Do this in the same way you would with a stylesheet. The files you have uploaded should be as follows for each font family you have ran through the generator:

• yourfont.eot – for Internet Explorer
• yourfont.woff – for Firefox 3.6+
• yourfont.svg – for Chrome and Opera
• yourfont.originalformat – whether it be .ttf of .otf for Safari and Firefox 3.5

Step 2 : Add the relevant CSS code to your stylesheet

Now we have our relevant font files uploaded all that’s left is todo is add the CSS code to our stylesheet the font(s) to be embedded and used. Within the package from Font Squirrel you should have an example CSS file that looks something like this :

/* * This CSS file has been generated by fontsquirrel.com and is based on the work of Paul Irish. * */ /* * * The fonts included are copyrighted by the vendor listed below. * * @vendor: West Wind Fonts * @licenseurl: http://www.fontsquirrel.com/license/Dearest * * */ @font-face { font-family: 'Dearest Regular'; src: url('Dearest.eot'); src: local('Dearest Regular'), local('Dearest'), url('Dearest.woff') format('woff'), url('Dearest.ttf') format('truetype'), url('Dearest.svg#Dearest') format('svg'); } @font-face { font-family: 'Dearest Open Regular'; src: url('Dearest_open.eot'); src: local('Dearest Open Regular'), local('DearestOpen'), url('Dearest_open.woff') format('woff'), url('Dearest_open.ttf') format('truetype'), url('Dearest_open.svg#DearestOpen') format('svg'); } @font-face { font-family: 'Dearest Outline Regular'; src: url('Dearest_outline.eot'); src: local('Dearest Outline Regular'), local('DearestOutline'), url('Dearest_outline.woff') format('woff'), url('Dearest_outline.ttf') format('truetype'), url('Dearest_outline.svg#DearestOutline') format('svg'); }

Copy this in its entirety and paste it into your stylesheet. Now look for the parts of the above code that precede an extension such as dearest.svg and change this to the correct path for your font files (uploaded earlier), keeping the font name and extension in place. Obviously the dearest font name in the above code with be replaced by your font file name.

After you have successfully changed the paths to point to the correct location of your font files you can use use the font name in the css ‘font-family’ property as you would with Arial or Verdana. Remember that if your font name has spaces in it you’ll need to enclose the name on the font-family line in single quotes.

Now if you go ahead and check your page in Firefox, Safari or heck even Internet Explorer you should now find beautifully replaced fonts.

Just a final note however to say that whilst @font-face rendering on Mac computers is near perfect it may be a little sketchy on Windows machines, a lot of this has to do with the quality of the font be used. Some fonts just seem to cope better with embedding than others at the moment and whilst Macs seem to mask this better you may find that it is indeed the font itself at fault as opposed to the operating system.

Up until now a viable way of embedding attractive typefaces in web pages has been elusive. SIFR, cufon and other replacement techniques gave us designers a hope and a glimmer of what could be but they also gave us our fair share of stress and frustration.

So what has changed? Recently? Quite a lot actually, I was first alerted to something possibly big coming down the pipeline when the FontFont foundry (one of the biggest and most popular type houses around) changed their eula to allow certain types of embedding. Now these changes still don’t allow web embedding via @font-face but they had effectively acknowledged SIFR (but not cufon) and similar techniques and deemed them legal. Why they only just changed is beyond me, given the age of SIFR and related techniques. A few more questions – Seeing how SIFR has only just been effectively legalised by them, does that mean using FontFont fonts in SIFR has been illegal thus far? If so what have been the consequences? Has there been any high profile legal action against web sites using FontFont’s fonts via SIFR? As you can see the change created as many questions as it did answers.

What this change in eula did show, however, was that embedding fonts was being looked at closely and would be addressed sooner rather than later. Despite being frustrating to not have a direct answer to @font-face related queries this change gave a hint that something more to come.

Introducing WOFF

WOFF is a font format that has now been given full backing by FontFont and a whole host of other type houses. It’s also gained traction with the W3C, Firefox (from 3.6) and many more influential figures. FontFont’s marketing director Ivo Gabrowitsch on the subject -  “FontShop International—home of the world’s largest collection of original, contemporary typefaces, the FontFont Library—supports WOFF, since users, designers, and foundries all need a Web fonts format.”. So it does look as though a realistic solution for all is just around the corner.

Basically WOFF isn’t an entirely new font format rather it’s a wrapper for the existing open font type that allows greater compression (good for embedding) and more importantly; allows font creators to add additional meta data to the existing font properties. WOFF can therefore be set to only allow embedding on one domain and isn’t as easy to download and use as a system font, which is the problem of the currently completely open @font-face specification.

The final plan looks to be for font foundries to distribute web only versions of their fonts maybe at a reduced price for web use only.

There has been no word yet of implementation for web-kit and other rendering engines but with so may pros it must only be a matter of time before other browser vendors grab a hold of this and run with it. Take a look at the mozzila blog post on woff for a more in-depth explanation. This really could be the breakthrough that designers have been begging for for years.

So that’s great, but what about right now?

There’s an answer for that also. Just before the news of WOFF started to sweep the web I came across an amazing tool from Font Squirrel, which will no doubt become as useful as any other online tool or application I use on a daily basis. The @font-face generator can take any font file and return a kit ready for embedding that is supported on every browser your likely to be testing on. In my last post about @font-face I complained about the impossibility of creating .eot files to serve to Internet Explorer but this generator completely eradicates the problem. Of course the same licensing issues apply to any font face you send through the generator but with so many free fonts available this tool gives designers a fantastic amount of freedom. The generator also includes a .woff file with every kit but at the moment I’m guessing its pretty much the same as the True or Open type font file.

If you haven’t already I strongly suggest you get over to Font Squirrel and see what they have to offer. Also take a look at their pre-packaged @font-face kits.

To sum it up …

Things are definitely looking up for font embedding, since my last post a mere two months ago we now have a solution to get @font-face running cross-browser, albeit still without commercial fonts and a embedding solution in the works that should allow designers to buy and embed commercial fonts to there hearts content.

PS – Font as service

As I was writing this article the thought of font as service providers popped into my head. I think it’s safe to say with the future looking so bright for embedding and a usable alternative to font as service offerings available right now the future looks rather bleek for the like of Typekit and co. Assuming they have deals in place with font foundries already and get off the ground, I can’t see people going through the pain of using their application when they can go straight to the type foundries themselves and effectively cut out the dependency  ona middleman out.

It just goes to show how quick things can change online. My guess is font as service providers are quite worried about recent developments and could well be buried by technology advances if they can’t change there plan around quick enough.