Embedding Tengwar on Websites
Introduction
This page tries to describe how to embed a font in your website. It focuses particularly on the Free Tengwar Font Project’s fonts, but the same procedure will work with other fonts as well. This page is intended for anybody who is writing their own website and wishes to display tengwar text. If you don’t know about the basics of CSS and HTML, this page will probably not be of much help to you.
The Problem of Tengwar on Websites
Displaying tengwar on your website is a problem. Since there is no Unicode standard for the tengwar, you can’t just type something in tengwar as you could with other scripts such as the кириллица, the ᚱᚢᚾᛁᚲ script, or the أبجدية عربية. Instead, you have to use a workaround, either recurring to images or embedded fonts. However, both solution have their drawbacks.
Recurring to images (for instance 
) means loosing flexibility. This concerns the author of the website as much as the website’s visitor. For the author, flexibility is lost because integrating tengwar images into other text will break the normal text flow. For the visitor, flexibility is lost because normal text operations such as copying or changing the font size are not possible with images.
Embedded fonts (for instance ) allow keeping all flexibility. The drawback is that this method will not work on all browsers. Since 2010, however, recent versions of major web browsers have supported embedded fonts. Windows Internet Explorer has done so since version 4 (1997-09), Mozilla Firefox since version 3.5 (2009-06), Safari since version 3.1 (2008-03), and Opera since version 10 (2009-10). As time goes by, this method is likely to be adapted more and more.
We are propagating font embedding. We believe it is the method of the future. It is not yet widely used, but the conditions for using it more widely are given. We invite you to use font embedding as described here, but don’t depend on it entirely since it does not work on all browsers yet.
How-to
If you want to embed a tengwar font on your website, you basically need two things: A set of suitable fonts and proper @font-face selectors. Once you have a suitable font and proper @font-face selectors, you can use the embedded font on your website.
Suitable Fonts
You need two different fonts, a TrueType font (TTF) for Mozilla Firefox, Safari and Opera, and an Embedded Open Type (EOT) font for Windows Internet Explorer.
The easiest way to get these two fonts is by downloading the Free Tengwar Font Project’s FreeMonoTengwar-embedding.2010-01-20.zip release. It includes both a TTF and an EOT font. You can just copy them to an appropriate folder on your internet host.
It is theoretically possible to use a font hosted on some other site in the internet, for instance on the Open Font Library, instead of uploading a copy of the font to your own internet host. However, this method will not work on all browsers, so it is safer to make a copy of the font.
Of course, you can choose other fonts at your convenience. TTF fonts are easy to find, and you can create EOT fonts from them. The conversion can be achieved either with Microsoft’s Web Embedding Fonts Tool or with taviso’s free ttf2eot. However, there are two things to consider:
- The license of the font must allow embedding the font in your website and editing the font into an EOT version. While most tengwar TTF fonts are free, their licenses are often not clear as to whether they allow embedding, and some even forbid editing. The Free Tengwar Font Project’s fonts allow this (though editing is not even necessary since an EOT version is already provided). You can use them right away in your website without worrying about license etc. since all copyright notices are included within.
- The font size should be as small as possible so pages that embed the fonts will load smoothly. This is why the Free Tengwar Font Project’s special FreeMonoTengwar-embedding release is more suited for embedding than the normal FreeMonoTengwar release (FreeMonoTengwar-embedding is really the same as FreeMonoTengwar, but with all non-tengwar signs removed).
Proper @font-face Selectors
Add the following to the CSS information of your website:
@font-face {
font-family: "FreeMonoTengwar";
src: url("/path/to/font/FreeMonoTengwar-embedding.eot");
}
@font-face {
font-family: "FreeMonoTengwar";
src: local("FreeMonoTengwar"),
local("FreeMonoTengwar-embedding"),
url("/path/to/font/FreeMonoTengwar-embedding.ttf") format("TrueType");
}The first @font-face selector is intended for Windows Internet Explorer. The other browsers will read it, but will go on reading the second as well and will validly only use the latter selector. Windows Internet Explorer will be unable to read the second selector because it includes the specification format("TrueType"). Note that the second selector checks for a local installation of the font before downloading the embedded font, something Windows Internet Explorer is unable to do.
If you are using The W3C CSS Validation Service on the above @font-face selectors, you will probably get errors. This is because the W3C CSS Validation Service defaults to CSS2.1, but the @font-face selector is part of CSS3 which is still under development. In order to pass the validation, you need to select the profile CSS level 3.
Using the Embedded Font
After you have suitable fonts and proper @font-face selectors, you can use the embedded font in a font definition, for instance like this:
<span style="font-family: FreeMonoTengwar; text-rendering: optimizeLegibility;"> <span>
This code will yield the following text: .
The CSS information text-rendering: optimizeLegibility is specific to the Windows and Linux versions of Gecko, the layout engine used by Firefox. It has no effect on other operating systems or on browsers that use other layout engines, such as Windows Internet Explorer or Safari. It makes sure that Firefox will display all ligatures, see text-rendering - MDC. If you use the CSS property text-rendering, the CSS code of your page will not pass the W3C CSS validation since this property is not part of any CSS standard, but specific to Gecko.
Note that for some obscure reason, Windows Internet Explorer will force more spacing after any character that occupies less than one pixel of width, such as the tehtar that are zero-width. Johan Winge discovered that for another yet more obscure reason, this behaviour can be prevented by sprinkling the text with the character U+200c ZERO WIDTH NON-JOINER (the character U+200d ZERO WIDTH JOINER does the same job, but it is more likely to change font display in a tengwar font).
Samples
....
⁊
... ....
The above text should look like the following image:
For a better display on Windows Internet Explorer, here follows the same text sprinkled with superfluous zero width non-joiners (one before each SPACE character – adding them after the spaces may prevent line wrapping). They should have no effect on other browsers:
....
⁊
... ....
Further Information
Most of what is said here was found on the following, much more detailed pages – check them out: