MyTech

I'm experimenting with my first attempt at using embedded fonts here at RealTech. I'm using the Gentium Basic TrueType font, which I downloaded from Font Squirrel. Since Internet Explorer doesn't support truetype fonts, I had to use the ttf2eot application to convert the truetype into EOT, which is what Microsoft supports. Edward O'Connor has a nice writeup in how to use ttf2eot. I downloaded my copy of the utility, since I couldn't get the Macports version to install. You can also use Microsoft's WEFT utility on Windows.

(update There is also a Gentium Basic font-face kit that contains everything you need, including EOT files and a stylesheet.)

Once I had both versions of all the font files uploaded to my server, I added the CSS for the font-face rules. You can add these rules as a separate file, or include them in your stylesheet, whatever rings your bell:

/* For IE */

@font-face {
        font-family: 'Gentium Basic';
        src: url('GenBasR.eot');
}

/* For Other Browsers */

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Regular'),
             local('GentiumBasic-Regular'),
             url('GenBasR.ttf') format('truetype');
}

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Italic'),
             local('GentiumBasic-Italic'),
             url('GenBasI.ttf') format('truetype');
        font-style: italic;
}

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Bold'),
             local('GentiumBasic-Bold'),
             url('GenBasB.ttf') format('truetype');
        font-weight: bold;
}

@font-face {
        font-family: 'Gentium Basic';
        src: local('Gentium Basic Bold Italic'),
             local('GentiumBasic-BoldItalic'),
             url('GenBasBI.ttf') format('truetype');
        font-weight: bold;
        font-style: italic;
}

Notice that there are separate files for bold and italic fonts, as well as the 'normal' font. All are included, and all are given the same font-face alias, in this case "Gentium Basic". It's up to the user agent to determine which font to use in which circumstance (normal weight versus bold, normal text versus italics), Once the fonts are defined, they're used wherever you would use standard fonts:

#rap {
  width:960px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background-color: #fff;
  color: #444;
  font: 0.9em/1.5em "Gentium Basic", Georgia,serif;
  font-style: normal;
}

I provide fallback fonts, for browsers that don't support font-face.

So, how are these font rules working in various browsers?

Browsers that don't support font-face yet, such as Opera 9.64, pick the fallback web safe font, as they should.

Safari 4 supports font-face, though the page can show up oddly until the fonts are downloaded to the person's machine. If you've accessed a web site and no text shows, but underlines are appearing for the links, chances are the person is using font-face. The "blank" text doesn't last long, though, depending on how fast your connection is, and how fast the web server serves up the font.

Once the font is loaded, Safari uses the fonts as described in the CSS3 specification.

Firefox has support for font-face beginning with 3.5. It doesn't have the download hiccup that Safari seems to have, because it uses the default web font until the font is downloaded, and then redraws the text. (From what I can see, other browsers such as Opera 10.0 beta 2 do the same.)

Using Browsershots and my own PC, I've found that Internet Explorer also makes use of the fonts, in the EOT format I've provided. However, it doesn't support the font style and weight specification.

Chrome is using WebKit, which would lead one to think that it supports font-face, but I've not seen webfonts work with Chrome. Again, just because Chrome is using the WebKit engine, doesn't mean the Chromium graphics engine (Chrome's own graphics engine) supports the same functionality that Safari or WebKit's graphics engine have.

Opera 10.0 has been a problem for me. All of the fonts are showing as italic in Opera 10 beta 2. I don't think there's a problem with my CSS, and have since filed a bug with Opera. When the fonts are installed on the desktop, then Opera 10.0 seems to work. If not, you get italics.

update Thanks to Philippe, I've updated the stylesheet. IE does not support the font weight and style setting, so you only specify the one EOT file, for the basic font. In addition, the local setting in the stylesheet provides a local file name for the font, for the browser to use rather than have to download the font. Opera 10 does work when the file is local, but not when downloaded.

Also thanks to Baldur, whose use of Gentium Basic inspired me to try it at my site.

Update

Bruce Lawson added a comment that Opera is aware of the problem, and working on a solution.

I received an email from Stefan Hausmann,who wrote:

@font-face has been disabled in Chrome [1] because of "security concerns". They announced webfonts support months ago, then disabled them by default, but failed to communicate that to the general public. They're working on reenabling them by default [2].

In the meantime, you can use the --enable-remote-fonts command line switch. It's still buggy on Chromium 4.0.202.0 where I tested it. Sometimes web fonts don't render at all, sometimes single words don't render (as if they were transparent) or only when selected. Sometimes selecting text with web fonts crashes the browser.

[1] http://code.google.com/p/chromium/issues/detail?id=9633 [2] http://code.google.com/p/chromium/issues/detail?id=17818

With the growing support for CSS3 in most of the major browsers, including Firefox, Safari, Opera, and now Chrome, I decided to incorporate the use of CSS3 properties into my own site designs. In addition, I also used an SVG graphic whenever I wanted a background that sized with the page.

The CSS3 properties I'm most interested in are text-shadow, box-shadow, border-radius, border-image, in addition to support for RGBA opacity. No more having to use kluge methods to add curved corners, or shadow text; no more stretched transparent PNGs, or layered DIV elements in order to provide border images. Though not all browsers support all of the properties, as long as we use the effects carefully, the designs should degrade, nicely.

Read on for the details.

Battered into a fetal ball by waves of bad economic news, only surfacing to watch an occasional crash and bash flick, such as Iron Man, I discovered my own personal bailout via Naomi Klein's book, "The Shock Doctrine: The Rise of Disaster Capitalism". Oddly enough, it wasn't something that Klein wrote (though she has many interesting points and I hope to write more on her book at a later time). No, it was a quote by the master of the Chicago School, Milton Friedman, himself, that loosed my death grip on self. As introduction to his book, Capitalism and Freedom, Friedman wrote:

only a crisis—actual or perceived—produces real change. When that crisis occurs, the actions that are taken depend on the ideas that are lying around. That, I believe, is our basic function: to develop alternatives to existing policies, to keep them alive and available until the politically impossible becomes politically inevitable.

The irony that the free market system Friedman loved so well is now experiencing its own "shock and awe", as corporations grasp at despised government intervention, like a baby its bottle, has not escaped me. But for me, the operative phrase in this quote is "the actions that are taken depend on the ideas lying around". This is totally irreverent to the problems we're facing, and I apologize in advance for seeming to trivialize the very difficult times we're all facing, but when I read this phrase I thought to myself, "Internet Explorer, your days are numbered."

Consider this: movement forward in the web has been stymied in recent years because, we're told, thousands of corporate intranets, and millions of corporate employees using these intranets are dependent on tricks and hacks put into place to support Internet Explorer 6. Add to this the, in my opinion, anal fixation that web pages must look the same in every browser, and most of our page design has been stuck like a bug in pitch.

Now that the corporations are downsizing in order to preserve what they can of executive compensation, the machines on which these applications run are being sold for scrape, tossed out along with the other chaff (i.e. employees). And those still employed, frankly, have other concerns than whether IE supports opacity or not.

I don't believe I'm alone in seeing the Friedmanesque possibilities of our current economic disaster. What better explanation for the recent production release of Google's Chrome browser? Google released Chrome from its beta utilizing a speed for which the company is not known. After all, isn't the GMail still in beta? Come to that, isn't the Google search engine still in beta?

Then there's the fact that Chrome is currently only supported in Windows, just like IE. Only like IE, as a matter of fact. No, I am sure that Google sensed corporate shock, and moved quickly to displace IE in the hearts and minds of upper management—not to mention the hearts and minds of millions of newly unemployed workers who are no longer subject to the intransigence of corporate IT. If by doing so, Chrome also kicks Firefox, Opera, and Safari in the face in its haste, eh, casualties of war.

I am not displeased by Google's move. After all, Chrome supports XHTML and some SVG, both of which Microsoft seems incapable of implementing. However, there is some confusion about what Chrome is, or is not, capable of supporting. True, Chrome has utilized the excellent WebKit, which also serves as the soul of Safari. However, as others have discovered and my new experimentation in web design demonstrates, Chrome has a different graphics engine (Skia) than Safari/Webkit. In the interests of "stripping" down the browser to make it lean and mean for web applications, the developers also made it rather, um, unattractive. At least for now. If you view this web page using Chrome, you will see that Google currently does not support the CSS3 text-shadow property, though it does support box-shadow. It also supports border-radius, though badly—the anti-aliasing is less than optimal, as is the support for alpha transparency.

While it is true that text-shadow, box-shadow, and border-radius are CSS3 properties, and thus not part of a released specification, they are supported in Safari 3.1 (and Firefox 3.1 and partially in Opera 9.x). Because of the Webkit tie-in between Safari 3.1 and Chrome, people may be confused when what works in Safari, does not work in Chrome. Well, those people who don't have other, more pressing, worries.