## October 31, 2009

### @Font-face

I decided to to dabble a bit with CSS3’s @font-face directive. Downloadable fonts are now supported by all major browsers, so I replaced Georgia (which I never really liked) with Charis SIL as the typeface for running text on this blog.

The CSS rules (which, purportedly, work with InternetExplorer) are

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

@font-face {
font-family: "Charis SIL";
src: url(/fonts/CharisSIL/CharisSILB.eot);
src: local('Charis SIL Bold'),
url(/fonts/CharisSIL/CharisSILB.ttf) format("truetype");
font-weight: bold;
}

@font-face {
font-family: "Charis SIL";
src: url(/fonts/CharisSIL/CharisSILI.eot);
src: local('Charis SIL Italic'),
url(/fonts/CharisSIL/CharisSILI.ttf) format("truetype");
font-style: italic;
}

@font-face {
font-family: "Charis SIL";
src: url(/fonts/CharisSIL/CharisSILBI.eot);
src: local('Charis SIL Bold Italic'),
url(/fonts/CharisSIL/CharisSILBI.ttf) format("truetype");
font-weight: bold;
font-style: italic;
}

The proprietary “.eot” fonts, which work with Explorer, were created using the commandline tool, ttf2eot.

When using a downloadable font, setting the font-size-adjust property seems to be the key to preventing the text from jiggling about, as the font loads from the web. (Users who already have the font installed, locally, won’t notice a jiggle.) What you do is

<span class="set">b</span><span class="adjust">b</span>

and then adjust the font-size-adjust property in the CSS rules

span.adjust{border:1px solid red;font-family:Charis SIL;
span.set{border:1px solid red;font-family:Charis SIL;}

until the heights of the two rectangles match. Use that font-size-adjust property, everywhere you use font-family:Charis SIL.

Now, the real question is:

Does something like this work for the STIX fonts, so that users can see the MathML, without having to download and install the fonts by hand?

And, I suppose, the next question is:

Why doesn’t IE support ETAGs for downloadable fonts?

Posted by distler at October 31, 2009 7:19 PM

TrackBack URL for this Entry:   http://golem.ph.utexas.edu/cgi-bin/MT-3.0/dxy-tb.fcgi/2099

### Re: @Font-face

This CSS tutorial is really useful. want to test it

Posted by: Esther Annies on November 1, 2009 10:37 AM | Permalink | Reply to this

### Re: @Font-face

Unfortunately, pages using @font-face can be quite annoying because some browsers (IE and Safari at least) don’t show any text until it downloads the font files, with large fonts/a slow connection it can take a minute or more to show anything or any text.

The font-size-adjust property is really quite useful, unfortunately Gecko browsers are the only ones I know of that support it, but at least the worse problem with not supporting it, is the font appearing at it’s normal size.

When working the value out, I use this web based tool, it measures the text and will work out the correct value to use.

Posted by: Alex on November 2, 2009 1:02 AM | Permalink | Reply to this

### Re: @Font-face

Unfortunately, pages using @font-face can be quite annoying because some browsers (IE and Safari at least) don’t show any text until it downloads the font files

Safari show shows you any text which doesn’t use @font-face. In my case, since I’m using @font-face for the body text, that’s not terribly useful. But, for someone using @font-face for a few header fonts, that might be acceptable.

Gecko uses one of the fallback fonts to display the initial text, and then swaps it out for the @font-face font, once the latter is downloaded.

The font-size-adjust property is really quite useful, unfortunately Gecko browsers are the only ones I know of that support it …

Well, since all it does is affect how the fallback font(s) are displayed, and since Safari doesn’t show you the fallback font for an @font-face font, this doesn’t mean much in the present context.

But it is a really useful feature in other contexts (making the x-height of the fallback font the same as that of the desired font).

I suppose, though, to support it, you need to know the aspect-value (the ratio of font-size to x-height) for the desired font.

How the heck does Gecko know that?

I suppose it could maintain a table of the aspect-values for well-known fonts. But what about obscure fonts, downloaded via @font-face?

A mystery …

Posted by: Jacques Distler on November 2, 2009 2:31 AM | Permalink | PGP Sig | Reply to this

### Re: @Font-face

The x-height of the font is stored in it’s metrics table, when Gecko loads the font it reads the value out and stores it. Of course, a bad value in the font will lead to a bad scaling, but if the font has bad metrics then you’re probably going to run into other issues.

The way it’s applied changed between CSS2 and CSS3, the new method is more flexible and is applied to any font the browser uses (the text size is scaled to meet the value specified in the stylesheet, if you want it to match the first font, then you need to supply it’s x-height value)

Posted by: Alex on November 2, 2009 3:58 AM | Permalink | Reply to this

### Re: @Font-face

The x-height of the font is stored in it’s metrics table … if you want it to match the first font, then you need to supply it’s x-height value

Right.

Sorry. I was being stupid…

Posted by: Jacques Distler on November 2, 2009 9:01 AM | Permalink | PGP Sig | Reply to this

### Re: @Font-face

My testing suggests that local() works best with the PostScript name of the font. Also, since all teh browsers that support @font-face also support Content-Encoding: gzip, I suggest linking to unconditionally gzipped font files.

Posted by: Henri Sivonen on November 3, 2009 3:36 AM | Permalink | Reply to this

### Re: @Font-face

I have mod_deflate installed, so I set

AddOutputFilter DEFLATE otf ttf eot

The compressed font files are 34% of their uncompressed size (as reported by my server logs).

Posted by: Jacques Distler on November 3, 2009 9:05 AM | Permalink | PGP Sig | Reply to this

Post a New Comment