Differences between revisions 18 and 37 (spanning 19 versions)

UnderstandingFontEmbedding

Note that this page is connected to the article Understanding Font Embedding on Vector, the APL magazine of the British APL association. Everything that is subject to changes is on this page on the APL Wiki, and it 's going to be updated whenever needed.

Update 2014-01-14

Since the article was published on Vector things have improved. Internet Explorer now understands "local". All modern browsers (including IE 9, 10 & 11) on all platforms but Opera Mini at least pretend to support the relatively new WOFF font format - see http://caniuse.com/woff for details. For that very reason the APL Wiki is downloading the WOFF version of the APL385 Unicode font now.

However, I found that Opera on Windows does not make use of the WOFF font. Therefore I've also added the TTF format; that fixed the problem. This is the only reason why the TTF font is still offered for download.

Web server issues

Because IE now supports WOFF we don't need the awkward EOT font anymore. That means we don't need to change anything on the web server side anymore.

Linux

All browsers under Linux should support the APL chars now. I've tested Firefox and Chrome with Ubuntu.

Downloads

apl385.woff.zip (The "APL385 Unicode" font as WOFF file; should suffice for all modern browsers)
apl385.ttf.zip (The "APL385 Unicode" font as TTF file; needed for Opera only)
fontface.zip (Sample CSS which should work with all modern browsers)

Author: KaiJaeger

CategoryUnicode

-  ⇤ ← Revision 18 as of 2010-01-10 17:41:49 → 
  Size: 9461
  Editor: KaiJaeger
  Comment:
+   ← Revision 37 as of 2017-11-21 10:08:49 → ⇥
  Size: 1678
  Editor: KaiJaeger
  Comment:
-Deletions are marked like this.
+Additions are marked like this.
 Line 1:
-<<TableOfContents>>
-Line 5:
+Line 3:
-Note that this article is updated frequently, so it should always reflect "latest reality".
+Note that this page is connected to the article [[ http://archive.vector.org.uk/art10500400  | Understanding Font Embedding]] on [[http://www.vector.org.uk/ | Vector]], the APL magazine of the British APL association. Everything that is subject to changes is on this page on the APL Wiki, and it 's going to be updated whenever needed.
-Line 7:
+Line 5:
-== What it is ==
+== Update 2014-01-14 ==
-Line 9:
+Line 7:
-'''''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 automatically in the background.
+Since the article was published on Vector things have improved. Internet Explorer now understands "local". All modern browsers (including IE 9, 10 & 11) on all platforms but Opera Mini at least pretend to support the relatively new WOFF font format - see http://caniuse.com/woff for details. For that very reason the APL Wiki is downloading the WOFF version of the APL385 Unicode font now.
-Line 11:
+Line 9:
-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. It refers to "Embedded Open Type" 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 (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: [[http://randsco.com/index.php/2009/07/04/p680|Embedding fonts: cross-browser problems]]

In short: 

The lack of support for the "Local" directive means that IE always download the font in question, even if it is already installed locally anyway. 

The "Format" directive is supposed to tell browsers which particular type of font the current font-face rule is all about, allowing them to skip this rule if the format tells them that they are not able to make use of it anyway. IE is not supporting "Local" and "Format" and adds them to the URL, making the whole thing fail.

== TTF ==

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: <<SeeSaw(section="EOT", toshow="<<Show>>", tohide="<<Hide>>", bg="#FEE1A5", speed="Slow")>>
{{{{#!wiki seesaw/EOT/EOT-bg/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 as we will see.

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.

Two important rules to follow:

 1. IE '''must''' come first.
 1. Make sure that all font-face rules are located at the very end of your CSS file.

Note 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 sometimes 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 installed "APLX Upright". Only when this fails, too, it makes use of "APLFont" which in turn is responsible for downloading the font in question.

In theory that's it. In practice it is a bit more complicated because Opera 10.0 is ought to process the "local" directive but it doesn't; Instead it failes completely. However, in the download section there is a file fontface.css available which deals with all these problems.

== 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 shouldn't be as bad as it sounds because the EOT version of a font is compressed and therefore supposed to be smaller than the corresponding TTF file. However, that is not true for the "APL385 Unicode" font. The EOT version is actually marginally larger then the TTF font.

Anyway, one can savely assume that somebody interested in APL has a fast Internet connection, so downloading about 186KB should not pose a problem. In fact it's 372KB because the APL wiki uses a special version of the "APL385 Unicode" font for headlines which is not publicly available.

== Who's going to take advantage? ==

These browsers should be fine. A (./) means that it worked at least for me.

 * Firefox 3.4 and better (./)
 * Internet Explorer 5, 5.5, 6, 7 and 8 (./)
 * Opera 10.0 and better (./)
 * Safari 4.0 and better (./)

I can report only for Windows. 

Note that there was a certain release of Firefox 3.5 which did not work, but that got fixed in the meantime.

Chrome 3.0 does not do font-embedding by default but according to Google the browser can be started with a particular switch that should change this default behaviour. However, I could not get it to work.
+However, I found that Opera on Windows does not make use of the WOFF font. Therefore I've also added the TTF format; that fixed the problem. This is the only reason why the TTF font is still offered for download.
-Line 135:
+Line 13:
-There is still a problem: We learned that an EOT file is supposed to come with a particular URL inside the file, and that IE won't accept a font which got downloaded from elsewhere. Fortunately, IE '''does''' accept an EOT file that does not have any URL specified. This is important for the APL wiki since we cannot download the font from <<BR>>`http://aplwiki.com/apl385 Unicode.eot`<<BR>> because this URL would be processed by the wiki software (!MoinMoin) and therefore result in a "Page not found".
+Because IE now supports WOFF we don't need the awkward EOT font anymore. That means we don't need to change anything on the web server side anymore.
-Line 137:
+Line 15:
-But Apache, the web server used for the APL wiki, won't deliver the font by default from another domain. To change that you must include this into your Apache configuration file (httpd.conf):
+== Linux ==
-Line 139:
+Line 17:
-{{{
Header set Access-Control-Allow-Origin "*"
}}}

This decreases the safety of the web site marginally.

I have no experiences with IIS.

== The future ==

We can assume that

 * Internet Explorer 9 will process both, "local" and "format".
 * EOT will become a W3C-recognized standard. Which means that sooner or later all other browsers will accept EOT fonts as well.

Mozilla has proposed WOFF (Web Open Font Format) which will be supported by Firefox 3.6. This new format addresses licensing issues and compresses fonts heavily. For details see [[http://hacks.mozilla.org/2009/10/woff/]]

The future is bright.
+All browsers under Linux should support the APL chars now. I've tested Firefox and Chrome with Ubuntu.
-Line 159:
+Line 20:
+ * [[attachment:apl385.woff.zip]] (The "APL385 Unicode" font as WOFF file; should suffice for all modern browsers) 
 * [[attachment:apl385.ttf.zip]] (The "APL385 Unicode" font as TTF file; needed for Opera only) 
 * [[attachment:fontface.zip]] (Sample CSS which should work with all modern browsers)
-Line 160:
+Line 24:
- * [[attachment:apl385.eot.zip]] (The "APL385 Unicode" font as EOT file; needed for IE)
 * [[attachment:apl385.ttf.zip]] (The "APL385 Unicode" font as TTF file; needed for IE)
 * [[attachment:fontface.zip]] (Sample CSS which should work with all modern browsers)
+Author: KaiJaeger
-Line 164:
+Line 26:
-Author: KaiJaeger
-Line 166:
+Line 27:
 CategoryUnicode