Sharovatov’s Weblog

Embedded fonts

Posted in browsers, css by sharovatov on 27 April 2009

Long long ago (before IE4, yes, IE4) Microsoft  proposed a standard called EOT (Embedded OpenType) which allowed you to embed any font on your website – all you had to do was to prepare eot fonts in a free WEFT tool (see nice how-to) and then reference them in your CSS:

@font-face {
    font-family: myFont;
    src: url(myfont.eot);
}

h1 { font-family: myFont; }

It’s interesting to know that support for @font-face property appeared in CSS2.0 without specifying of font format, then was suddenly dropped in CSS2.1 and now is back in CSS3.

And now, 10 years later after this feature has been introduced in IE4, all other browsers are slowly starting to implement embedded fonts support. As always, browser vendors talk about compatibility more than actually support this compatibility – while the technology is 10 years old and quite mature, none of popular browsers supports or plans to support EOT – only IE.

And this silent boycott of EOT looks extremely weird because EOT has got a unique feature – font file in this format can be much smaller than a TTF/OTF file due to subsetting. And EOT is not proprietary any more – Microsoft has submitted it to W3C. The only reason browser vendors say stops them from implementing EOT is DRM, but:

  1. as Mark Wubben says, using OTF/TTF can be violating fonts EULA while EOT was designed to follow the rules.
  2. there’re free fonts that can be embedded.

And it’s really funny to read rants like this – if there’s a law, you can’t just violate it because you think it’s too hard to follow it.

And while browser vendors pretend they don’t see the industry standard implementation of the technology, we’ll have to use something like this:

@font-face {
   font-family: myFont;
   src: url(font.eot);
}

@font-face {
   font-family: myFont;
   src: url(font.ttf) format("truetype"),
      url(font.eot) format("embedded-opentype");
}

I.e. set the @font-face twice – for IE and other browsers. More crap for us, developers. Thanks to Opera, Mozilla and Safari.

Update: Thanks to Philip Taylor, author of great web fonts application, he pointed in comments that I was wrong saying that TTF/OTF didn’t support subsetting – they did! But my point is still the same – why inventing other standards when there’s a working one?

Links:

About these ads
Tagged with: , ,

2 Responses

Subscribe to comments with RSS.

  1. Philip Taylor said, on 7 May 2009 at 1:05 pm

    “EOT has got a unique feature – font file in this format can be much smaller than a TTF/OTF file due to subsetting” is inaccurate, since TTF/OTF files can do exactly the same subsetting – it’s a feature of the tool, not of the file format. The “Nice webapp that generates EOT files from free opentype fonts” generates .ttf files too, which are almost identical to the equivalent .eot files. (The only difference is a ~200 byte header added to the .eot files.)

    (EOT does have the unique feature of “Monotype Imaging’s patented MicroType® Express font compression technology”, which is not supported in TTF/OTF, but it’s not clear how useful that is when you can use subsetting and gzip for plain old TTF/OTF.)

  2. sharovatov said, on 13 May 2009 at 6:39 am

    Hi Philip

    Thanks for clarification, that’s really useful! I’m updating the post.

    Thanks again!
    Vitaly


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: