APL Wiki|
Size: 3827
Comment:
|
Size: 2791
Comment:
|
| Deletions are marked like this. | Additions are marked like this. |
| Line 3: | Line 3: |
| == What it is == '''''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. From a designers point of view this is really nice, but there are important issues regarding licensing. == 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. 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. 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. == IE and EOT == EOT 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 listed in the EOT files will IE use it. These allows to address licensing issues. 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. |
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 31: | Line 6: |
| 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, <<SeeSaw(section="EOT", toshow="<<here are the details>>", tohide="<<hide the details>>", bg="#FEE1A5", speed="Slow")>> | |
| Line 32: | Line 8: |
| 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. | {{{{#!wiki seesaw/EOT/EOT-bg/hide |
| Line 34: | Line 10: |
| But there is a tools available that '''can''' create an EOT file that is used by IE8. Originally it was a UNIX/LINUX project: | 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: |
| Line 38: | Line 16: |
| 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. |
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. |
| Line 47: | Line 23: |
| }}}} | |
| Line 48: | Line 25: |
| 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. | 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. == Web server issues == Any EOT file is supposed to come with a particular URL inside the file: 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". But Apache, the web server used for the APL Wiki, won't deliver the font from another domain with it's default configuration. To change that you must include this into your Apache configuration file (httpd.conf): |
| Line 51: | Line 34: |
| /* IE first */ @font-face { font-family: 'APLFont'; src: url("http://misc.aplteam.com/apl385U.eot"); } |
Header set Access-Control-Allow-Origin "*" }}} This decreases the safety of the web site marginally. |
| Line 57: | Line 38: |
| @font-face { font-family: 'APLFont'; src: url("http://misc.aplteam.com/apl385.ttf"); } |
I have no experiences with IIS. |
| Line 62: | Line 40: |
| }}} | == Downloads == * [[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) |
| Line 64: | Line 45: |
| 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;} }}} |
Author: KaiJaeger |
| Line 70: | Line 47: |
| 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. | Updated: 2010-02-21 |
| Line 72: | Line 49: |
| Author: KaiJaeger | |
| Line 74: | Line 50: |
| 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.
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
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.
Web server issues
Any EOT file is supposed to come with a particular URL inside the file: 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
http://aplwiki.com/apl385 Unicode.eot
because this URL would be processed by the wiki software (MoinMoin) and therefore result in a "Page not found".
But Apache, the web server used for the APL Wiki, won't deliver the font from another domain with it's default configuration. To change that you must include this into your Apache configuration file (httpd.conf):
Header set Access-Control-Allow-Origin "*"
This decreases the safety of the web site marginally.
I have no experiences with IIS.
Downloads
apl385.eot.zip (The "APL385 Unicode" font as EOT file; needed for IE)
apl385.ttf.zip (The "APL385 Unicode" font as TTF file; needed for IE)
fontface.zip (Sample CSS which should work with all modern browsers)
Author: KaiJaeger
Updated: 2010-02-21