Using web fonts with Adobe AIR 2.5

Additional Requirements

In order to make the most of this article, you need the following software and files:

Aptana Studio 2.0

• Download

Note: You can read here more about Aptana's support for AIR development.

Adobe AIR 2.5 SDK

• Download

Adobe AIR 2.5 introduces support for downloadable font resources or web fonts. Web fonts can be referenced using the @font-face CSS rule, which is supported by most modern browsers and enables web developers to link and display fonts that are not installed on the user's machine. These fonts are downloaded by the browser from a remote server when the content is viewed.

Typography is important for a number of digital print editions of newspapers, magazines, books. The user experience depends on the quality of the typography. Making sure your carefully selected fonts can be rendered on the user's display is the first and most important step towards a great user experience. Furthermore, web fonts are protected with services such as Typekit: users who browse a page that uses the @font-face rule don't have access to the font files. This allows you to use commercial fonts and thus differentiate your products from others.

Adobe AIR 2.5 supports web fonts for desktop applications built using ActionScript/Flex (using HTMLLoader) or HTML/JavaScript/CSS. If you build applications for mobile, then web fonts are supported through the StageWebView control.

AIR supports the following web font formats:

• TrueType (.ttf)
• OpenType (.ttf/.otf)

Embedded OpenType (EOT), Web Open Font Format (WOFF), and SVG Fonts are currently not supported. 

Before going into details on how an AIR application might use web fonts, I'd like to provide a brief overview of the companion application for this article. I decided to build this application using HTML/JavaScript/CSS mainly because web fonts are an HTML-related feature (although you can use this feature in an ActionScript or Flex project as well).

The AIRWebFontDemo sample application is a simple book reader (see Figure 1). It displays a book (Alice in Wonderland by Lewis Caroll) and it lets you change the font size and family. You can navigate through the content using the scrollbar or the navigation buttons on the bottom. The application also has a fullscreen mode and remembers the last state. When the application is closed, information about the application's window size, scroll position, and font size and family are persisted on the disk and restored the next time the user opens the application.

As you can see it is a pretty simple application both from the point of view of the source code and features. Nevertheless, it touches on some of the features you'd probably want to have in a real book reader.

If you download the AIRWebFontDemo.zip file (this file is an Aptana AIR project), unzip the file, and import it into Aptana Studio using File > Import > General > Existing Projects into Workspace (selecting the folder where you unzipped the file) you will see a project with the structure shown in Figure 2.

Now that you have an overview of the structure of the application have a look how it was implemented.

The application user interface is defined in the AIRWebFontDemo.html file and its companion CSS file, style.css. Basically, what I did here is a liquid design with two fixed zones on the Y axis (the top and the bottom stripes) and a mobile one in between them. On these two zones I placed the UI controls. In the flexible one I placed an <iframe> . And this <iframe> is used for displaying the book itself.

If you take a look at the AIRWebFontDemo.html and style.css files you'll notice that I had to use a lot of DIVs and CSS in order to create this liquid design. After finishing the user interface for this application I came to this conclusion: when developing desktop applications with AIR and HTML I don't think using DIV tags instead of TABLE tags is recommended. When you build applications you have to position (pixel perfect) a lot of controls and using a mix of DIV and TABLE tags helps both in development speed and quality. Imagine the work needed for creating the user interface of a complex text editor using only DIV tags.

Next, all the scripting that brings to life the user interface defined in AIRWebFontDemo.html is in js/script.js file. These are the main features provided by this script:

• Sending style and navigation changes to the <iframe> that displays the book. These changes include: increasing/decreasing font size, changing the font familly, or navigating though the book using the Prev/Next/Top buttons.
• Registering event listeners for key down and exit application events. When a user chooses fullscreen mode and presses the ESC key, then the script changes the display mode. When the application is closed, the current state is saved to disk.
• Saving and reading to or from disk the application state on loading the application or closing it.

Some of this logic is hooked using the onload events of the main HTML application and <iframe> content. For example once the onload event is thrown by the main application (and this means the applicatin was initialized, thus I can access the stage, for example), the initialize() function is executed and I use this to register the listeners. Then, when the onload event is thrown by the <iframe> (this means the book content was loaded by the <iframe> including the Web Font used) I execute the restorePosition() function, which in turns applies the values saved in the previous session.

In order to persist the information related to application state I chose to create a JavaScript object and then I serialize this object in a file in the application storage directory.

Finally, the last important part of this application is the books/alice.html file. This file stores the book content. It has some JavaScript code and CSS. There are two reasons for the presence of JavaScript:

• In this application I chose to use Adobe Web Fonts served by Typekit . Typekit is a subsription-based service and it offers fonts that can be used either for free or for a subscription fee. In order to support this workflow Typekit requires developers to include some JavaScript when using their services.
• Because of the way I load the <iframe> content (in the nonapplication sandbox) I had to use the Sandbox Bridge in order to push the style or scrolling changes from the main application to the page displayed by the <iframe> . Thus I have a number of JavaScript functions defined here and exposed through the Sandbox Bridge.

The main idea behind web fonts is that the font is loaded by the browser at runtime from a remote server. Depending on who's the remote server you have different workflows to follow in order to use web fonts in Adobe AIR.

If you use Typekit services, for example, you'll have to:

1. Load the HTML content that you want to use web fonts from Typekit in an <iframe> and set the documentRoot and sandboxRoot to reflect where the HTML file is located relative to appliction source folder and what is the domain name you set in your Typekit account. For example, these are values set in my application:

2. In the <head> section of the HTML file where you use the web fonts you have to add the following <script> tags (the URL for the first script is customized for each account; this means you have to retrieve the script from your Typekit account):

3. In your Typekit account, depending on the account type you have, you add the fonts you want to use. Then you add the selectors or tags you want to apply to the fonts. In Figure 3 you can see in the top-left corner that the Adobe Garamond Pro font is enabled for the body tag and the tk-adobe-garamond-pro class. Then you have to press the Publish button in order to enable the settings.
4. You apply the font you've enabled in the Typekit account by adding CSS to the HTML file like this (in order to find what is the name of the font, click the Advanced link shown in Figure 3):

If you want to use a font from Google Font Directory, then the steps are:

• Retrieve the font CSS inclusion tag for the font you want to use from the Google Font Directory site and add this tag as the first tag of the <head> node. For example, for the Cantarell font the tag is: 

• Then declare the font name on the elements you want to be rendered withthe font you chose. Example:

Lastly, you should be aware of the overhead that web fonts add to a project in terms of resources which have to be downloaded at runtime. Because web fonts are retrieved from a remote server, as you can observe if you run my application, it can take some time in order to download the font file. This means you should always take this in consideration when using a large number of web fonts.

The addition of web fonts support in Adobe AIR opens up the possibility to finetune and control the text presentation in your applications. This can improve a lot your projects when what are you building a digital version of a book, magazine, or newspaper. If you want to stay in touch with what the Adobe Type Team is doing you can follow their blog. Also refer to the Adobe Web Fonts FAQ.