Typography is the most common and fundamental design element on the web. Yet over the years, you've probably grown accustomed to using web-safe fonts on your websites. While web fonts served their purpose well, there are much better ways to render fonts on web pages.
For example, Adobe recently introduced a free service called Adobe Edge Web Fonts, which provides access to a huge font library made possible by contributions from Adobe, Google, and designers around the world. Under the hood, the service is powered by Adobe Typekit and uses the same standards-based method of serving fonts, along with the same global font-serving network for speed and stability. But the Edge Web Fonts service is completely free and requires no account or kit configuration, making it faster and easier to get started. In this article, I show you how to use Edge Web Fonts.
Before discovering Edge Web Fonts, my online marketing company used Cufón fonts and @font-face in many of the sites it created. Cufón renders fonts as an image in the browser but maintains the ability to select and copy the text from the page. This makes Cufón a better, lighter, and more search-friendly solution than using text images as headers, but it's not ideal. Cufón fonts sometimes appear blurry on high-resolution Retina displays or when viewed with certain browsers (see Figure 1).
Edge Web Fonts uses @font-face, a CSS rule that downloads the defined font to a visitor's browser in order to render the font properly in a web page. As a result, fonts are more likely to appear correctly across a wide range of device browsers — ultimately providing a more reliable long-term solution that will perform well as the web and devices evolve.
Edge Web Fonts relies on the Adobe Typekit network, which means your fonts will be served from a global network built with hundreds of servers located across North America, Europe, Australia, and Asia. In fact, Edge Web Fonts uses the same font event CSS classes as Typekit.
The Typekit architecture is optimized for very low-latency response times and is measured in milliseconds — often faster than most websites can serve their own CSS. This minimizes the annoying flash of unstyled text (FOUT) and the associated headaches that go along with implementing workarounds. The following video shows an example of FOUT on a website menu during page load:
Visit the Edge Web Fonts page and click the Try button to access the Font Preview page. As you can see in Figure 2, there are several helpful ways to filter your font selections and change the default font preview. I prefer to select the List Preview mode and type a few words into the search field, rather than using the default alphabet display. As you find the fonts you want to use in your project, click Select This Font from the floating window that appears when you hover over the font.
When you first open Edge Code CC, there is a sample HTML page with headers and body copy that works well for testing Edge Web Fonts implementation. If you are using a different HTML editor, you can create your own HTML and CSS page or download the sample HTML and CSS files (ZIP, 4 KB) from Edge Code that I'm working with.
<head> of your HTML page. This is the code that loads the font to the browser.
Save the HTML page and then open the associated CSS file. This is where you apply the fonts you have chosen. Copy the font-family declarations and paste them into your CSS file in the appropriate locations, such as the body style and header styles. You will notice that a fall-back font is provided for older browsers or in case the font cannot be downloaded for some reason. You can define your own fall-back fonts if you prefer.
Save the CSS file and then refresh the HTML page in any browser to see that the page is restyled using Edge Web Fonts (see Figure 4).
I mentioned earlier that some handy Edge Web Fonts integration features are showing up across Adobe's lineup of web tools. Adobe Edge Code offers an even easier option. In the CSS file, you can begin typing a font name following the font-family selector, and Edge Code provides code hinting, which enables you to browse the entire Adobe Edge Web Fonts library without leaving the application. The font selector dialog box provides font previews and even includes recommendations for whether a font is appropriate for body or header copy (see Figure 5).
<head> tag of the HTML page and you are ready to go. The following video shows you the whole process in action:
Just like the fonts on your computer, fonts from the Edge Web Fonts library include variants. For instance, Sansita One has only one variant, while Source Sans Pro has twelve. You can learn more about font variation descriptions, along with other important documentation, on the Edge Web Fonts site.
Adobe and Google are making significant contributions to open source technologies and are collaborating to improve the web typography landscape. Adobe Edge Web Fonts and Google Web Fonts utilize very similar technologies and even share some of the same fonts. They are equally appealing solutions, and I applaud both companies for their contributions to open source projects. Things change so fast on the web, and it may not be long before I'm discussing even newer and better ways to implement typography on the web. Until that day, welcome to Adobe Edge Web Fonts.
Dave Klein is an online marketing consultant based in Boulder, Colorado. He has worked with several Adobe partners focusing on 3D software and technologies since early 2000. Reach him at kleinnewmedia.com.