Getting Started with Adobe Edge Web Fonts

Adobe Edge Web Fonts is a new, free font service hosted by Adobe that was announced in September. This is great news because it means that developers now have access to 100's of free fonts that will work across browsers and platforms. This is just another step in breaking the hold that Arial/Helvetica, Times New Roman/Times, Georgia and Verdana have on the cross-browser, cross-platform web safe font landscape. These are high quality fonts distributed and created by Adobe, as well as font contributed through a partnership with Google for fonts that are also available from the Google Web Fonts service and other sources.

Which fonts are available?

Adobe Edge Web Fonts offers around 500 free and open source fonts presently. The list of all of the fonts that are available is here. Adobe also offers a preview of some their fonts, however this is just a small subset of the fonts, and the usability is less than optimal. A number of developers have created sites to preview all of the fonts, such as this one.

Adobe Edge Web Fonts vs. Google Web Fonts

With Google and Adobe being the big names in free web fonts, and their newly announced partnership, you may be wondering which service you should use. For existing Google Fonts users, many of the Google Web Fonts are now available on Adobe Edge Web Fonts, so should you make the switch? Maybe, but you might want to hold off for a bit. One of the big advantages of hosted web fonts is caching. If you're using a popular font that is being hosted with Google, your users may have loaded the font on another website before browsing to your site, resulting in the font being cached and your site loading quicker. This is an advantage that Google will have for a while. Google also allows you to download the fonts hosted on their service and host them locally on your server, so you don't have to worry about the Google service going down, something that you can't do with Adobe's service.

However, Adobe Edge features fonts created by Adobe, which are historically of excellent quality. Adobe fonts are also hosted via Typekit and established service, that was aquired by Adobe in 2011, and a pioneer in web fonts.

Adobe and Google both offer around 500 free fonts each. The Google and Adobe offering both feature the Web Font Loader, a collaboration between the two companies that offers a standard API for serving up web fonts. One great feature of the The Web Font Loader is font events, more on this in a minute.

Using Adobe Edge Web Fonts

Getting started with Edge Web fonts is easy.

First pick a font using one of the options listed above under Which Fonts are Available?

Next, using the font name that you have picked, create a javascript link of the following form:

<script src="http://use.edgefonts.net/font-name.js" type="text/javascript"></script>

Second, define a style using the same font name:

<style type="text/css">
body
{
    font-family: font-name;
}
</style>

That's all it takes to get started with free web fonts from Adobe. Note that the above code snippets are styled using Adobe's Source Code Pro font served from Adobe Edge Web Fonts.

Web Fonts Usability and The Dreaded Flash of Unstyled Text

While you can be up in running with web fonts in just a few minutes, there is an important user experience design consideration that must be taken into account. The Flash of Unstyled Text is an old problem that primarily effects Firefox. Before a web font loads, the browser renders text using a default or fallback font. Then, once the web font loads, the font changes, and the text flickers and reforms on the page, creating the unsightly Flash of Unstyled Text, or FOUT. To help deal with FOUT, Typekit and Google created font events, which is available in both of those services, as well as Adobe Edge Web Fonts.

Font events simply toggle a CSS classes related to font state on the page's html tag (https://developers.google.com/webfonts/docs/webfont_loader#Styles). When fonts begin to load, a class of .wf-loading is applied to the head tag. Once loading has completed, .wf-loading is removed, and a class of .wf-active is applied, unless all fonts fail to load, in which case a class of .wf-inactive is applied. These classes can be used with CSS rules or JavaScript to toggle the visibility of text on the page, and eliminate the Flash of Unstyled Text. You use these events to hide any font that is styled using web fonts until the web font has loaded, and then you show the text that is styled with that fond.

Here are two simple CSS rules that you can use as a starting point for eliminiating FOUT using font events:

<style type="text/css">
.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading p
{
    visibility: hidden;
}

.wf-active h1,
.wf-active h2,
.wf-active h3,
.wf-active p
{
    visibility: visible;
}
</style>

This is just a starting point, for most sites you will have to set more rules for other text occurrences, such as .wf-loading h4, .wf-loading span, or .wf-loading #section. The reason that you shouldn't set the rule as simply .wf-loading { visibility: hidden; } is that this will toggle the visibility of the content for the entire page, and the user will not have the benefit of seeing anything load. The user may grow impatient thinking that the page is not loading, and move on to another site.

Web fonts are a great way of improving the design of your site, and Adobe's new free offering is a welcome addition to the developer's toolbox.

Posted by: David Marchelya
Last revised: 08 Oct, 2012 12:00 AM

Comments

David Marchelya Bespoke Industries Denver, CO U.S.A
Product of Bespoke Industries