There was a time when the only way that designers could be sure that text on a website would render as intended was to design around the limited selection of fonts known as "web-safe fonts." If you wanted to venture beyond web-safe fonts, another option would be to create type as art work and display it as an image. However, this method comes with a performance hit, administration overhead, SEO concerns, and of course, cost implications.
Around 2010, a number of different services were already cropping up and offering a way to break out of the monotony of only using web-safe fonts. Instead, these services made it possible to embed non-standard fonts within your website. Some services like sIFR (Scalable Inman Flash Replacement), offer font replacement by targeting certain text elements with JavaScript and replacing them with Flash content. Other systems like Cufón use JavaScript to change your custom font file into a vector markup. This allows you to use it on any browser without the limitations of a Flash dependency. Last but not least is a strictly CSS addition @font-face.
While the CSS @font-face rule has been available since 1998, it was not completely supported by all browsers until 2010. When a web developer specifies fonts using @font-face, the web browser temporarily downloads the fonts and uses them to display your text.
@font-face has come into its own over recent years because of the rise of several webfont services or providers. These companies offer a paid service which includes the ability to store fonts on servers, and anyone's website can access and automatically download those fonts, which are optimized for onscreen display.
Most of these webfont services are subscription-based, with different tiers of service to satisfy different budgets and needs. The majority require that you add a special code to your site, but offer clear instructions on how to do so. One of the front-runners in the @font-face game is Google fonts primarily because their system is "free".
For designers and clients alike, all of this means greatly expanded creative and typographic freedom, plus text that is searchable, editable, and faster loading than images.
Benefits of the New Technology
- Accessibility: Text remains readable to assistive technologies such as JAWS, a common screen reader for people with visual impairment
- Visual: Fonts are optimized for screen display at a variety of sizes and on high-resolution devices. This provides crisper cleaner display for more engaging experiences on a wide variety of devices. New font features such as small caps, ligatures, and kerning are available.
- Branding: Fonts can be used as a subtle design element or a powerful branding tool. The use of web fonts provides more opportunity to enhance the design and reinforce the brand.
- Flexibility: Copy changes and regular text edits are faster and this, more cost effective. Traditionally, updating text that used custom fonts required recreating images. @font-face allows faster updates and can allow the web server software to pull text from a database.
- SEO: Search engine spiders cannot read text in images. So large parts of the message such as headline cannot be read. @font-face allows for more ‘live’ text, which spiders can read and use to index the site, which increases the SEO effectiveness.
Compatibility
The current versions of the most popular web browsers (Internet Explorer, Firefox, Chrome, and Safari) all support the @font-face font substitution technology. However, a standard format hasn't been agreed upon. This results in unique specs for each targeted browser.
When developing a website that uses a font not installed on the user's system four different file formats are required, in order to be fully compatible across multiple browsers. They are: OpenType/TrueType Font (.otf/.ttf: Chrome, Safari, Firefox), Web Open Font Format (.woff: Chrome, Firefox, IE9+), Embedded OpenType (.eot: IE 5.5+) and Scalable Vector Graphic (.svg: iOS). The browser will determine which font is required and temporarily download it.
| IE6-IE8 | IE9 | IE10+ | Firefox | Chrome | Safari | |
|---|---|---|---|---|---|---|
| .ttf | -- | -- | -- | Yes | Yes | Yes |
| .woff | -- | Yes | Yes | Yes | Yes | -- |
| .eot | Yes | -- | -- | -- | -- | -- |
| .svg | -- | -- | -- | -- | -- | Yes |
| .otf | -- | -- | Yes | Yes | Yes | Yes |
A popular alternative for including non-standard fonts is through the use of Google’s webfonts API. It requires a call to Google’s server which detects the browser and version, then returns a custom style sheet containing the appropriate @font-face declarations. The font file is then temporarily downloaded from Google’s servers.
It is a best practice to include all font style variants (e.g. – bold, italic, bold italic, etc) when using non-standard fonts. Web browser technology has come a long way but most still do not reliably emulate the variant from the regular version of the font.
