Webfonts and IE’s stifling practices

Webfonts are a somewhat new way of adding unusual fonts to a Web site. Basically, it’s a part of CSS (officially as of CSS 3) that allows Web designers to use fancy-schmancy fonts that end users can see in their browsers even if those users don’t have those particular fonts installed on their systems. It’s brilliant. Finally, Web sites can easily catch up to their cousins in print and bitmapped graphics in flare and general awesomeness. It works quite well in Firefox & family, Opera, Konqueror, the latest Epiphany, and (I have read) WebKit-powered Chrome 2 and Safari.

And, of course, not in IE.

Here’s how I did it.

Webfonts uses the @font-face rule in my style sheet, which I admit is a bit of a mess. There are seven rules here: The first two are proprietary fonts I don’t have a license to (the beautiful Felix Titling and Twentieth Century), and the next two are also fonts that I’m keeping in reserve (Teamouse and Dream Orphan, both freeware).

The last three (beginning on line 148) are for the new font I’m using for all my headers and for my title graphic, Effloresce by Canadian fontsmith Ray Larabie. That’s one each for regular, italic and bold. The font files are stored on my server, uploaded through my content management system (regular, italic and bold).

Here’s how it looks:

@font-face {

          font-family: "Effloresce";

               src: url("writing/docs/547.otf") format("OpenType");

     }

     @font-face {

               font-family: "Effloresce";

               src: url("writing/docs/548.otf") format("OpenType");

               font-style: italic;

     }

     @font-face {

               font-family: "Effloresce";

               src: url("writing/docs/549.otf") format("OpenType");

               font-weight: bold;

     }

It’s great when you can finally pick the fonts you always wanted to use for your site. I plan on doing two things: looking for more open license fonts at places like webfonts.info and myfonts.com. While I don’t agree with the digital rights regimes in Canada and the United States, I don’t plan on going to places like free-fonts-ttf.org, which seem to be distributing a whole host of proprietary fonts are free.

Webfonts work with OpenType (.otf) and TrueType (.ttf) fonts in about three quarters of browsers worldwide (the ones that don’t suck) and the proprietary (read: bullshit DRMed, stuck in the 1990’s) Embedded Open Type (.eot), which is the only system that works in Internet Explorer and works only in Internet Explorer.

I don’t get it. Even IE 8 sticks to this stupid exclusive rule. Microsoft seems to be sending the message to developers that better content on-line is less important than protecting the handful of people who somehow own the rights to 500-year-old fonts like Felix Titling. And it’s not just webfonts. From holding out on technologies like ActiveX when everyone else went in a different direction, to holding back Web development by making even their latest browsers poorly compliant, Microsoft is just making life difficult for developers for no good reason.

So why should I write code for a dated browser technology with precipitously declining usage numbers?

Chrome’s header problem

My only copy of Chrome, Crossover Chromium, doesn’t send new headers with PHP. That means when you click on "Archive" on this Web site, it just doesn’t go because that particular button—and a few others—relies on a redirect from the server using PHP. Apparently I’m not the only one with the problem.

There’s a potential fix here using something something Status. I’ll try it out and see what’s going down. This seems more like a bug than a design problem.

UPDATE: Konqueror and the last listed Webfont rule; Firefox and bold

Seems like there’s a problem in KHTML and webfonts. You can see in the code above that the bold version of Effloresce is listed last. That’s causing Konqueror to render all Effloresce text bold. All I had to do was put the @font-face rule with the regular weight last so KHTML takes that to be Effloresce proper. On a scale of 1 to 10, 10 being most annoying, it’s maybe a 4.

Another weight-related problem is in Firefox and family. Other browsers assume the font weight to be normal for header tags when the weight is not declared. So I found that h1, h2, etc rendered bold (which I didn’t want) until I made it explicit in the CSS file that that’s not how I wanted it. That’s a 3 out of 10. End.