Fonts add style and personality to a website. They make headlines stand out and they affect the readability of a site. Back in the dark ages of the internet, good web designs were limited to using web-safe fonts — fonts that are routinely installed on all major operating systems. Websites generally use either Serif or Sans-serif fonts. Serif fonts have small strokes or lines that extend from the ends of letters and symbols. Serif fonts have been used for centuries in printed materials — books, newspapers, magazines. Sans-serif fonts are simple and straightforward, and lack the “lines” of the serif fonts (“sans” is French for “without”). Because the simplicity of sans-serif fonts makes them easier to read on computers, most websites use sans-serif fonts for the body.
In the Serif family, the web-safe fonts are Georgia and Times New Roman. For Sans-serif, the web-safe fonts are Arial, Arial Black, Impact, Trebuchet MS, and Verdana. A good list of web-safe fonts and what they look like can be found at www.upsdell.com.
Why limit your web site to web-safe fonts? Because if you use a font that isn’t installed on the user’s computer, then the user won’t see that font. Instead, the user’s browser will replace it with a similar font that is on his/her computer. So for consistency, web designers used and recommended web-safe fonts. After all, if only 5% of the users can see the beautiful font, why bother?
With CSS2 came the ability to embed fonts. Unlike web-safe fonts, this method actually downloads and displays the font the designer used, whether or not it is installed on your computer. One main issue with this method, however, is that anyone can easily embed a commercial font they have on their computer, without a license. This can cause legal problems fast. Ethical web designers steered clear of using fonts unless they were sure there were no licensing issues (either the fonts were royalty free, or the client had purchased a license).
All that changed when Google stepped into the arena with a new service. Google Web Font provides hundreds of quality fonts (last time I checked about 291) that can be used in any web page by anyone. Cloud-based fonts are now becoming standard. This method is compatible with all major browsers (Chrome, Firefox, Safari, Opera, and even the bane of all designers, Internet Explorer (6+). Best of all, the fonts will display reliably on the vast majority of mobile operating systems (Android, iPhone, iPad, iPod). So head over to Google Fonts and browse away!