Ethiopic Web Fonts at EthiopicType.com

I just re-launched EthiopicType (http://www.ethiopictype.com). It is intended to serve as an archive of Web Typographic Resources for the Ethiopic Script. It currently has a simple text-to-PNG image generator, a dynamic image generation API , a collection of free web fonts with their respective CDN embed codes and links to tutorials, input methods and other resources.

In this article, I will discuss the problems of Web Typography and the details of the new site.

 

If you see rectangular boxes on a webpage instead of Ethiopic Text, it is because the browser you are using does not have the necessary fonts installed.

 

**You don’t see this problem often now a days because Microsoft has bundled the font Nyala with newer versions of Windows (Vista, 7, 8). Regardless, you should make sure the text on your webpage is displayed correctly on the number of platforms that do not have have native support Ethiopic Text. These include Windows XP, Mac OS X (< 10.7.3) , iOS, Android (<= 4.04), Windows Mobile, Blackberry OS, Samsung Bada, and some flavors of Linux.

 

Most operating systems come pre-installed with their own unique bundle of fonts, therefore it is hard to maintain consistent typography on different browsers. The CSS1 specification attempted to tackle this problem by providing the ‘font-style’ and ‘font-family’ properties, but this only informed the browser to display close matches found on the system. For example, when font-family is set to Sans, it may render Tahoma on Windows, Helvetica on Macintosh or FreeSans on Linux. Their similarity was adequate for plain textual content but it did not suffice for decorative headings and other design elements that are crucial for the aesthetic aspects of web design.

 

This has historically created significant difficulties for web designers and developers because it made it impossible to predict the exact rendering of their typography on every browser. You can find detailed information on the history of Web Fonts here: Wikipedia: Web Typography but I will provide a brief overview of several attempts that have been made to solve this problem:

 

Image Replacement

 

This is an old technique which involves rendering the text into the desired font and embedding it in the web page as an image.

 

Static Images

In this scenario, the designer renders the text as a rasterized bitmap image with the desired font and places the image as an <img> tag into the webpage. This was popular in the early days of the internet (late 90s - early 2000s) when servers and client-side processing resources were limited. It is still in use today for logos and headings that require fancy styles. Designers also place the text in the alt attribute so it can be read by screen readers and clients that do not support images. The image generator at EthiopicType.com currently uses this method, I plan to make it fully dynamic in the feature.

 

Dynamic Images

Dynamic images are usually dynamically generated on the server-side and inserted into the webpage usually as an AJAX request or CSS media query based on client-side validation such as CSS3 web fonts support or native font support (more details below).

 

Here is a PHP tool you can try out: P+C DTR

There are also some implementations that use client side vector generation using Flash. This is more efficient than using static images but only works on browsers that support Adobe Flash (which automatically excludes iOS, Android and other mobile clients). However, it is a great tool for desktop clients, given the 99% Flash penetration rate. You can read more about this method here Scalable Inman Flash Replacement.

 

Here are some great plugins for Wordpress and Drupal that automatically generates images based on browser support.

Wordpress > Facelift Image Replacement (FLIR)

Drupal >Facelift Image Replacement Integration

 

I have tested the Wordpress Plugin with Amharic fonts with no success. Please let me know your experienceif you decide to try it out.

 

CSS Image Replacement

This is a hybrid of the techniques mentioned above, it uses the CSS background-image property which works similar to the first method but does not display the text image if the browser does not support it. Instead, it displays the raw text which can still be formatted using other CSS properties, giving it an advantage over traditional HTML img tag.

 

You can read more about it here: Fahrner Image Replacement

 

If you want to learn more about specific implementations and compare the pros and cons of each method you may find this useful: A List Apart Article

 

Vector Text

This is closely related to Web Fonts but it is slightly different because the fonts are converted to vector glyphs (using Bézier curves) and do not support text-selection and instant typing.

It is not as popular as Image replacement due to browser compatibility issues with the vector formats (Internet Explorer supports only the deprecated VML, support for later versions of SVG is still limited).

 

Web Fonts

 

Prior to the emergence of web fonts, browsers relied only on the fonts supplied by the operating system to render textual content in the HTML. WebFonts have made it possible to render almost any font on multiple browsers. The CSS3 specification includes the @font-face element which provides support for Web Fonts on newer versions of most browsers.

 

It works by having the browser download the desired font (or a subset of the glyph set) and applying it dynamically to the specified HTML elements. This method can be very inefficient on slower connections and older cleints because it requires heavy client-side processing and consumes large bandwidth resources.

 

You can detailed information about Web Fonts here: Wikipedia: Web Typography

 

The fonts are available for download or can be embedded directly from the CDN. Most of the fonts come from SenaMiirmir, which I highly recommend if you’re interested in learning more about the Ethiopic Script. The fonts are currently hosted on Amazon’s EC2 but I plan to migrate the fonts to Amazon S3 for increased performance and availability. If you have a server with closer proximity to Ethiopia and would like to act as a mirror, I will give you the web service for generating the embed codes automatically. In the future, I plan to include a WYSIWYG (What you see is what you get) editor for the Image Generator and ability to generate a wider range of output (JPG, SVG, PDF…).

 

The fonts vary in size depending on their format and breadth of glyphs covered. Currently, the smallest is GeezNewB (7KB WOFF) and the largest is FreeSerif (3,167KB SVG )

 

Bandwidth is always an issue when downloading resources and it makes it impractical to use web fonts on slow connections. Samuel Teklu (creator of jGeez) has solved this problem by checking for native support before downloading the fonts. I recommend his solution, especially if you don’t need a specific font for styling.

 

Here is a link to his blog post: Detecting if there is a Geez unicode installed on client browsers

 

Meanwhile, I will try to remove the non-Ethiopic Glyphs from some of the fonts and add them as special cases so a smaller file can be used in cases that require only Ethiopic text.

Please let me know your experience with these fonts (I have not tested all of them) and send me an email at: [email protected] if you would like to contribute resources.

 

Thank you for your time