To get around this limitation designers used to create graphics for headlines, or use flash based scripts such as sifr. CSS3 allows for easy embedding of fonts on a page, surprisingly it’s supported well across all browsers.

Browser Support for @font-face

All modern browsers support the @font-face rule in some shape or form. Internet Explorer has supported it since IE4, with the only issue being that they only support embedding of their own proprietry font file – EOT. Safari, Firefox and Opera should all support True Type or Open Type fonts. Safari on the iPod/iPhone will only support SVG files. With this in mind it’s always good to pick a web safe back up font to ensure your site degrades nicely.

Fonts and Licensing

Fonts aren’t just free for everyone to use. Make sure that the font you plan on using on your site is bought and the license permits you to use it online. There are plenty of free fonts out there, use one of those if you aren’t sure. If a client insists on using Helvetica or other commercial font, make sure they buy it first!

Converting Your Font

If you have a TTF or OTF font you can convert it online to EOT and SVG using a service like Font Squirrel (who also provide some great free to use fonts, prepackaged for using on the web.) The typeface I’m using on this site is Charis which I downloaded from there.

Once you have your font files ftp them up onto your web site.

The CSS

Declare the fonts you wish to use at the top of your css file

@font-face {
	font-family: 'CharisSILRegular';
	src: url('Fonts/CharisSILR.eot');
	src: local('Charis SIL Regular'), local('CharisSIL'), url('Fonts/CharisSILR.ttf') format('truetype');
}

font-family: This can be anything you want, it’s how you will call the font later on in your CSS file.
src: This tells the browser where your font is located.url is a location on your server, local would be the name of the file if a user happens to have it already and format is the file type. It’s always good to give the local name as it would mean that if the user has the font they don’t need to download it from your server. If the browser doesn’t find the font locally it will move to the next source. Declare your EOT file seperately from the others.

So now you have declared the font you can use it throughout your CSS in the same way you use other fonts

h1 { font: 2em CharisSILRegular, Georgia, serif;}

Don’t forget to add a fall back font (in this case Georgia, then any other serif font) to ensure maximum degradability. That’s all there is to it. Just like in print design try not add too many fonts to one design (even more importantly for the web as the browser needs to download every font the user doesn’t have locally)

Layout differences are easy enough to deal with. We just display alternative style sheets for different browsers. It does however increase the time we are required to spend ensuring our sites look just right on your browser of choice. That’s our problem, not yours (though if you are a client you really should be concerned with how our time is being held  up by just one browser). Recently though, with the move towards new web technologies, Internet Explorer is starting to hold back how we can make sites work better and that’s getting frustrating.

A good example is on this site. As it’s a personal site I’m keen to exploit new technolgies and use it as a testing ground for things I develop for clients. The image gallery at the bottom of the page is written in jQuery, works perfectly in all browsers… breaks in IE with a completely non-specific error. I’ve spent an hour or so looking into it with no joy (edit – after another hour I’ve found that Internet Explorer does not support window.innerWidth). Frustrating to say the least. I just can’t see why it is that I can code a site knowing it will work fine in all Browsers with the exception of Internet Explorer and then must spend extra time getting the same functionality to work on it alone (not to mention how each version of Internet Explorer has it’s own issues).

The main reason someone should upgrade to a better browser is that on nearly all accounts Internet Explorer is the weakest application on the market. It’s simply an inferior piece of kit. Have a look at this infographic.

Internet Explorer uses more resources, renders styles and selects items on a page slower than any other modern browser out there. It’s like driving up a motorway in a scooter. Why would you do that to yourself?

Use of Internet Explorer also holds innovation back. The following issues are unlikely to be resolved in the next decade if people continue to use Internet Explorer:

1. Limited Data URI Support

   Support for this could speed up the delivery of web content. All it means is instead of referencing data it can be embedded within the page.

2. SVG Graphics

   Again, support for this could really speed up your browsing experience. This graphics format can be edited using a text editor, can scale to any size and allows user interaction (think Flash without the plugins).

3. CSS3 Colours

   Instead of us designers using Javascript or graphics files to create transparency on the web we could just use css. Not at present unfortunately.

4. Embedded Fonts

   All other browsers use OpenType Font embedding, Internet Explorer does not use this, using it’s own EOT font format. In fairness it was first to the game regarding font embedding, but OpenType is by far the most popular font format these days.

5. Text Shadows

   Putting nice drop shadows on text is just simply not supported. Could be a blessing though as I could see it being well over used

6. Rounded Corners

   Instead of creating graphics to give the effect of nice rounded corners on boxes we could just be using a simple css declaration.

7. Multiple Columns

   This is a must have feature. At present text cannot flow dynamically into neat columns. That’s why you either see carefully designed sites where the text is placed in each column statically (or the columns are uneven) or you have lines of text that are just too hard to read. Alternatively you do what I’ve done on this site and increase the size of the text / decrease the area it is displayed on. The optimum amount of text on a line for readability is 10 or so words. Go grab a book off the shelf and see for yourself. Multiple columns are a great idea. They’ve been employed in print for centuries. If Internet Exlorer has it’s way it could be decades before we get to use it on the web.

There’s a lot more Internet Explorer cannot do but the above are my main gripes. If this sort of thing interests you check out When can I use.

So if you are reading this on Internet Explorer please consider upgrading to another browser.