Every now and then designers and/or developers run into the problem of designing a website or application that includes non-web fonts because not all fonts are installed on all end-user computers or other devices. Therefore, one often settles for one of the 11 less-appealing core web-fonts, which include Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman,Trebuchet MS, Verdana, and Webdings. These are the standard fonts used by all devices. It’s been the only way to ensure that all website visitors will see exactly what the designer intended. The only alternative is to render your type as graphics, which is impractical. What follows are some solutions for using the exact font your design requires, or at least a font reasonably close.
Here at PRI we use the first two below. We begin with my first choice, Google Web Fonts.
Google Web Fonts
Google continues to roll out new products and services and in May 2010 the Google team introduced Google Web Fonts. The site offers hundreds of free, open-source fonts that are already optimized for the web. What I like most about Google Web Fonts is ease of implementation. You can use any of Google’s optimized fonts in three easy steps:
- Select a font from their library
- Include a link to the font in your site or web page’s code. For example: <link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>
- Apply the font name to your CSS styles. For example: font-family: 'Condiment', cursive;
Typekit
Typekit offers a fast and reliable method of using real fonts on your website. Acquired by Adobe in October 2011, Typekit offers access to hundreds of web fonts by simply adding a line or two of code to the header of your web pages. However, unlike Google Web Fonts, Typekit’s free service plan only allows for one website and two fonts. Free plan users also have to slap a badge on their site that links back to the Typekit website. Typekit’s pricing structure starts at $24.99 per year, which may be an affordable solution for their full library of over 700 fonts.
Cufón
Another popular solution is Cufón, “fonts for the people.” Cufón is a font-replacement solution that uses JavaScript and vector graphics to output fonts from TTF (TrueType), OTF, (OpenType) or PFB (Printer Font Binary) font files. One of its main benefits is that no plug-in is needed, making Cufón fully compatible in all major browsers.
While all of these options work pretty well across all modern web browsers, the quality of the text varies and is dependent on operating systems, web browsers, and even your monitor. Font sizes 30px or larger may also be best served as images, with the copy referenced in the image ALT tag for search and accessibility purposes. The images below illustrate how the same web font (Lobster), set at the same font size (72px), can differ in just two different versions of the same web browser. The first shows how the Lobster font at 72px appears in Internet Explorer 9, while the second (smaller and slightly more pixelated) shows the same font and size as it appears in Internet Explorer 8.
Lobster font, 72 px, in Internet Explorer 9:
Lobster font, 72 px, in Internet Explorer 8:
Other popular web-font solutions include the CSS3’s @font-face method, Fahrner Image Replacement (FIR), and Scalable Inman Flash Replacement (sIFR).
So, with thousands upon thousands of fonts and so many solutions to implement them on the web, we do not need to rely upon default core fonts, anymore.
