UnderstandingFontEmbedding

What it is

Font embedding simply means that when a web site is in need for a particular font to display a particular piece of text then this font is downloaded and installed temporarily by the browser.

From a designers point of view this is really nice, but there are important issues regarding licensing.

For APLers it's a chance to display APL code correctly on any machine even if that machine does not have an appropriate APL Unicode font installed.

What it is not

This article assumes that you have sufficient skills in CSS.

History

Font embedding was introduced by Microsoft with Internet Explorer 4 a long long time ago. This was never adapted by other browsers, and there was a reason for that: IE only accepts so-called EOT-fonts. Now this format, although it has its merits, was owned by Microsoft, and Microsoft never even tried to make it a standard. For that reason other browser vendors stood away from this format.

In 2009, two things changed: Firstly, almost all other browsers (with the notable exception of Chrome) started to implement font embedding, although in a very different way. Secondly, Microsoft made the EOT-format public and at the same time started to make it a W3C-accepted standard.

That's good news, although for the time being it means that one has to provide different CSS rules for the IE and all the other browsers.

IE and EOT

EOT, which stands for "Embedded Open Type", addresses two important issues:

It can be reduced to contain not all but only those characters of a particular font which got actually used on a particular web site.
It can be bound to a particular URL. In other words, only when the font is downloaded from a URL contained in the EOT file itself will IE make use of it. These allows to address licensing issues.

The way Microsoft has implemented it in terms of CSS rules is unfortunately different from all the other browsers: You cannot specify "Local" or "Format". If you are interested in details, this is the best source I managed to find: Embedding fonts: cross-browser problems

TTF fonts

TTFs (True Type Fonts) are used by the rest of the world for embedding fonts. Unfortunately there is no way to address licensing issues. This is bad news because it means that strictly speaking one can use only free TTFs for embedding purposes. Good news is that thanks to Adrian Smith, the owner and originator of "APL385 Unicode", everybody is allowed to distribute the "APL385 Unicode" TTF freely.

Converting a TTF font into EOT

In order to use the "APL385 Unicode" fonts for font embedding in IE we need to convert this font into an EOT file. Now if you are interested in how to do this, here are the details: Show Hide

There is a tool available from Microsoft called WEFT that theoretically allows us to do this, but unfortunately IE won't use the resulting EOT file. The reasons are unknown.

However, there is a tool available that can create an EOT file that is used by IE8. Originally it was a UNIX/LINUX project:

http://code.google.com/p/ttf2eot/

This tool has a disadvantage: it does not allow us to bind the EOT-file to a particular URL. In our case, however, it doesn't matter.

The syntax to convert any font is easy; given you are in a directory where the exe as well as the font to be converted is located:

  ttf2eot.exe OLD-FONT.ttf NEW-FONT.eot

But you don't have to: Instead you can download a zipped version of the EOT file from this page, see the "Downloads" section at the very end of the page.

The CSS

Here is CSS code that defines a font "APLFont" from an embedded font. Note that IE must come first, and that the IE part must not contain "local" and "format" - IE doesn't understand them and as a result fails to process not only that CSS rule but the rest of the CSS file as well. Other browsers will try to understand the rule but finally ignore it because it's not referring to a TTF font. Then they will carry on to process the remaining parts of the CSS file.

Note that the link http://misc.aplteam.com/apl385.eot is a real one but of course you should not use it in your own CSS file.

/* IE first */
@font-face {
        font-family: 'APLFont';
        src:    url("http://misc.aplteam.com/apl385U.eot");
}

@font-face {
        font-family: 'APLFont';
        src:    url("http://misc.aplteam.com/apl385.ttf");
}

Now "APLFont" can be used in the same way as any other font-family in CSS. An example:

pre{
font-family:"APL385 Unicode","APLX Upright",APLFont,monospace;}

Note that this lets the browser try to use a locally installed "APL385 Unicode" font first. If there is no such font installed on the local machine, it tries to find a locally instakked "APLX Upright". Only when this fails, too, it makes use of "APLFont" which in turn is responsible for downloading the font in question.

Performance considerations

Because the IE does not recognize the "Local" directive, there is no way to tell IE "download this font only if that font (this and that may or may not be the same font) is not installed locally. Which mans that IE will always download the font.

This is not as bad as it sounds because the EOT version of a font is compressed anyway, so an EOT file will always be smaller than the corresponding TTF file. You you also savely assume that somebody interested in APL has a fast Internet connection, so downloading

Downloads

apl385.eot.zip (The "APL385 Unicode" font as EOT file; needed for IE)

Author: KaiJaeger

CategoryUnicode