For more than ten years, the web was completely limited and based exclusively on these few fonts.
Designers who wanted to add some visual creativity to their work would instead need to create bitmap images of the text. Of course this came with limitations such limited options for size and placement and even more importantly it incurred serious implications for those all-important Google search results. Technologies in the past, would use software like Flash or JavaScript to substitute their font choice on the selected text, even though the software itself wasn’t universally available on everyone’s computers. Neither solution was a workable solution for enhancing body text either, with the substitution techniques requiring a great deal of processor power and time to render large amounts of text.
With no acceptable options available, web developers began searching for a better solution to this growing typographical problem. Eventually, it was realized that standardizing a CSS feature called @font-face could solve the issue. CSS @font-face was actually developed in the late 90’s but because of browser incompatibility and vast differences in the extent and reliability of its implementation, it wasn’t fully utilized until 2009 and thus the era of Web Fonts was realized.
With the use of some specially programmed files and a small piece of CSS3 code, web font technology defines a family of fonts by actually linking to a actual font file, located on the server, instead of pointing to a pre-installed system font in the user’s computer. The web font is then applied to text on a web page by referencing it using the font-family CSS property. Text created using a font-family property avoids the issues related to the previous alternatives to web-safe fonts, in that the text is still selectable just like with traditional web-safe fonts, and it doesn’t require any third-party browser add-ons such as Flash.
Because of licensing issues from fount foundries and fears of font theft by downloading the fonts from a web page, hosted web font services have gained in popularity across the web. Google Webfonts and Typekit and are the two most utilized choices on website design today. The Google Font API lets you use a small, optimized set of license-free fonts by just linking to a stylesheet and letting the Google webfont API handle the browser and compatibility issues. It’s the fastest and easiest way to utilize web fonts in site design
Web fonts clearly have an advantage over the basic web-safe fonts of yesterday. The doors to fully realized design, on the web, are open with the widespread availability of this new technology. Web designers can now select from almost as many fonts as traditional print designers, allowing the web to showcase more design and creativity than ever before.