Understanding Web Fonts

Fonts on the web have a long and bumpy history especially as they relates to dingbats. We have tried using unicode as an alternative to designing icons. This may be a sound approach in the html5 era but there is much to learn about css3 font technology.

The evolution of font technology has been bumpy. This is in part due to the need to protect fonts as intellectual property and the slow succession of browser versions. wikipedia

We've used unicode glyphs as journal icons and have recently expanded the repertoire with the introduction of Journal Spacers. Paul Rodwell asks: Is it better to look at an iconic font, like Font Awesome or Typicons ?

Formats

CSS includes the @font-face rule mechanism to allow browsers to choose one of many font formats for dynamically loaded fonts. Fonts are made portable by offering all common formats.

Embedded OpenType (EOT) is a standard supported exclusively by Internet Explorer and submitted as part of CSS3. The W3C ultimately chose a different web font format (WOFF) as a W3C Recommendation. wikipedia

WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints. wikipedia

Content

Icons can be called out by name using CSS3's content: property in combination with the :before and :after pseudo-elements. w3c

Named icons can be called out by class on an empty span or i tag. For example, class="typcn typcn-arrow-left" for a left arrow. This still uses unicode, but the numeric codes are buried in the css, not in the application.