When it comes to website design, for many years now, we’ve been forced to either stick with the measly selection of available web fonts, or use a JavaScript / Flash work around in order to embed a font of our choice.
Everything is set to change on this front, when we see the widespread uptake of the @font-face selector, which will be readily available when we see the official release of CSS3.
Fear not, we can still use this technique with a decent degree of success, and ensure that the four major browsers including IE, FireFox, Chrome & Safari are all supported.
Achieving Cross Browser Compatibility
After a little scouting around on the web, it would appear that even though all browsers will not support embedding a single font type using @font-face, but it can if we use a series different font file types.
Follow these 3 very easy steps to see @font-face in action.
1. Acquiring your font
Ensure that you have acquired your font in a law-abiding fashion. Fonts are governed by the same creative licensing copyrights as items such as stock images and videos. So please ensure that you have permission to use the font commercially and embed the font on a web page.
Auto-generate font files using Font Squirrel
2. Converting Your Font
In order to offer support across multiple platforms, you will need to convert your font to the necessary file types. This can be done, quickly and easily, using the excellent font squirrel @font-face generator, which is free to use, and will automatically generate the stylesheet, HTML and font file types. Easy!
3. The CSS Part
Font Squirrel, Kindly gives us all the required ingredients, along with W3C complying code, when validated against the CSS3 validation schema, but it may still be worth adding a fall back solution by defining a font-family as usual, should browser support not be in place.
Oh Dear, IE6 Again?
As per usual, IE6 struggles to get to grips with this font replacement method. A required hack? or time to turn your back… on the browser of sin!
