Differences between revisions 1 and 37 (spanning 36 versions)
⇤ ← Revision 1 as of 2009-11-14 11:57:40 →
Size: 3827
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 3: Line 3:
== What it is == 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 5: Line 5:
'''''Font embedding''''' simply means that when a website is in need for a specific font to display a particular, then this font is downloaded and temporarily installed. == Update 2014-01-14 ==
Line 7: Line 7:
From a designers point of view this is really nice, but there are important issues regarding licensing. 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 9: Line 9:
== 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 good reason for that: IE only accepts so-called EOT-fonts. Now this format, although it has clear merits, was owned by Microsoft, and Microsoft never even tried to make it a standard. For that reason others stood away from this format.		 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 12: Line 11:
In 2009, two things changed: Firstly, Almost all others (with the notable exception of Chrome) browsers 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. == Web server issues ==
Line 14: Line 13:
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 browser. 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 16: Line 15:
== IE and EOT == == Linux ==
Line 18: Line 17:
EOT addresses two important issues: All browsers under Linux should support the APL chars now. I've tested Firefox and Chrome with Ubuntu.
Line 20: Line 19:
 * 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. == Downloads ==
 * [[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 22: Line 24:
 * It can be bound to a particular URL. In other words, only when the font is downloaded from a URL listed in the EOT files will IE use it. These allows to address licensing issues. Author: KaiJaeger
Line 24: Line 26:
The way Microsoft has implemented it is unfortunately different from other browser: You cannot specify "Local" or "Format". If you are interested in details, google for it.

== TTF fonts ==

TTF fonts are used by the rest of the world. Unfortunately there is no way to address licensing issues. Strictly speaking one can use only free fonts with this technique. Good news is that everybody is allowed to distribute "APL385 Unicode" freely.

== Converting a TTF font into EOT ==

To make "APL385 Unicode" available for font embedding in IE, we need an EOT file. Now 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.

But there is a tools 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/

but you can [[download the Windows version]] here.

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
}}}

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 neither "local" nor "format" - IE doesn't understand them. Note that the link http://misc.aplteam.com/apl385U.eot is real, but of course you should not use it.

{{{
/* 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 local "APL385 Unicode" font first. If there is no such font installed on the local machine, it tries to find "APLX Upright". Only when this fails, too, it makes use of the embedded font.

Author: KaiJaeger
Line 74: Line 27:
CategoryUnicode CategoryUnicode 

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

UnderstandingFontEmbedding (last edited 2017-11-21 10:08:49 by KaiJaeger)