It can be a real pain dealing with Armenian fonts. Doubly so when dealing with Armenian fonts on the Internet. While all essentially modern operating systems include at least one font that has the ability to render Unicode Armenian text, most of them are not what you would consider visually appealing. In fact, I would consider most of them simply awful.

Visiting a website like a1plus, you’ll most likely see the text of the website with either Sylfaen or Arial Unicode, depending on what OS you use. Neither of these fonts are very nice, the latter bordering on unreadable in my opinion. A limited number of people will see the text rendered with two significantly better fonts, Arian AMU or Arial AMU, if they have those fonts already installed on their computer. This is the font-family CSS declaration that a1plus uses:

* {font-family: "Arian AMU", "Arial AMU", "Arial Unicode", Sylfaen, sans-serif; font-size: 12px}

If you’ve got one of the first two fonts in this list, then you’ll experience the site as it’s designers intended. If not, then you’ll have to muddle through with whatever your Operating System has on hand. Its a less then ideal situation, and its not unique to non-English fonts.

The @font-face revolution

In general, dealing with fonts on the Internet has been pretty bleak. Web designers have been forced to choose from a handful of fonts that are common to major operating systems, leaving them with very little material to work with creatively.

It hasn’t been until recently that Web Browsers have advanced enough to allow designers to have much greater creative and technical flexibility with regard to typography online. This new technology (even though its not that new) is called @font-face, and it allows web developers to actually embed a TrueType font in a given website. This means that we can allow users to view a website in any font we choose, including… Armenian fonts.

Getting it done

This question was raised while working on a multi-lingual website for the children’s center my wife and I volunteer at. I wanted to use Arian AMU, but I was hesitant because I knew most people wouldn’t have the font. The answer: @font-face. But before I go over how I did it, lets consider some of the negatives to embedding a font.

1. Font embedding is inconsistently supported between different web browsers. Rendering can still be buggy at times as well.
2. Given that the browser has to download the font files before it can be rendered, there can be a lag between when a page loads when the text is actually visible. These can be weird for users who are used to see text immediately when loading a website.
3. The above problem is exacerbated for multi-lingual font files. As they contain significantly more characters they result in significantly larger files. Being larger they take longer to download, and are therefore increase the amount of time before the user can see the text.
4. There is a question of licensing as well. A designer shouldn’t embed a font on a website unless the font’s licensing allows for it. This has been one of the major hangups in the adoption of this technology.

Two services and few tricks resolved all of these issues for me. Lets go over them.

Generating the font files with FontSquirrel

FontSquirrel, is an awesome website that will generate a font-face kit from any TrueType font. Visit their @font-face generator to see how it works.

FontSquirrel nullifies the first of our adoption hurdles. It automatically generates “Bulletproof” CSS code that will ensure that your font renders properly on as many clients as possible. It couldn’t be easier.

We have another issue that must be addressed here though. My goal was to embed Arian AMU on this site. As its a multi-lingual font the generated files were several hundred kilobytes! This could mean that it would take several seconds for our users to download the font, and that is too long.

The solution lies in the fact that we don’t need our files to contain any information for characters aren’t Armenian. We can actually force FontSquirrel to filter out any characters that aren’t Armenian. Here’s how:

1. Upload your TrueType Armenian Font
2. Click on “Expert”
3. Under “Subsetting”, click on “Custom Subsetting”
4. Under “Unicode Range”, input the range for Armenian Unicode which is 0530-058F (see figure 1)
5. If you want more robust character support you can also tick the boxes for currency, math, and other non-language character types
6. Note: If you uploading bold and italic versions as well, make sure to click on “Style Linking” under “CSS Options”

The resulting files were 12-30 KB, which is essentially the size of a small image, and can be downloaded quickly by even slow connections. A webfont version of the same font prepared by w3.org was ~200 KB, so you can see that we’ve really trimmed down the size.

You can then download the resulting font kit.

Utilizing the Open Source WebFont Loader

We’ve addressed a few of our issues, but its still a problem that our fonts aren’t visible until the font files are downloaded. Also, we have to worry about browsers that don’t support @font-face at all. Thankfully a few days ago, a collaboration was announced between Google and TypeKit, the latter being a service which has really pioneered @font-face adoption over the past year.

TypeKit has recently opensourced its WebFont Loader Javascript library that they internally developed which “gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience.” Google is using this library for its recently announced Google Fonts project.

It will allow us to make sure that our text remains visible for non-modern browsers, and make the text visible in a default font until our font downloads. We can add it to our website by including the following script:

<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

And we can initialize our fonts by adding the following code, where stylesheet.css is the CSS file that has our font-face declarations in it.

<script type="text/javascript">
  WebFont.load({
    custom: {
      families: ['ArianAMU'],
      urls : ['stylesheet.css']
    }
  });
</script>

Now we can apply styles to our various Armenian language page elements.

:lang(hy) {
  font-family: 'Arian AMU', 'ArianAMU';
}

The first font is that actually Arian AMU font, just in case our user actually has the font installed on the computer. The second is our webfont. Note that I used the “:lang” selector to declare which elements should use Armenian fonts. You can use the “lang” attribute on page elements or on the whole page to indicate what language the content is in. This is the most semantic way to do this. For example:

<html lang="en-US">
  <body>
    <p>
      Hello World
    </p>
    <p lang="hy">
      Բարև Աշխարհ
    </p>
  </body>
</html>

The results

You can checkout the demos that I created to see how it works. Testing on my computer showed complete browser compatibility. Testing with litmusapp.com resulted in slightly less compatability, but I’m sure that was due to issues with time lag.

Download the Arian AMU font kit

Since I spent the time, go ahead and download the already prepared font kit. It’ll get you started on your project.

Download ArianAMU-fontkit.zip [125 KB]

Note: I’m not exactly sure about the license details of Arian AMU. Its been available for download on many websites, so I’m sure that it most have some sort of an open license. Just in case, don’t use it for any commercial websites unless you confirm that its not a breach of the font’s license agreement.

Update: If you want to see a more real world example, I’ve added this script to my Grabar Cheatsheet website.