Traditionally, the fonts used on a website were rendered by the browser using fonts resident upon the browser's computer. The website builder could attempt to specify a particular font but if that font was not available then a substitution would be made. There were a few techniques that could be used to render some content, particularly things like headers, in a special font using various forms of image substitution. Those techniques added complexity and could not be used for all circumstances, e.g., in body text.
CSS3 provides a new way to specify the fonts used to render text. This allows websites to either provide their own fonts, or, more significantly, reference external font libraries (e.g., hosted by Google) and control the fonts used by all CSS3 compliant browsers. All of the current versions of popular browsers, even recent versions of Internet Explorer (Version 9, and later), support this facility. We've begun to use this facility on some of our newly developed websites, including this one.
At Troutreach, we've traditionally used a font named "Arial Rounded MT Bold" (hereinafter ARMTB; distributed for desktop use by Microsoft with many programs) in an italic style and a bold weight to render our name. We liked it, and still do. We'd use it with the new facilities of CSS3 on this site BUT it's not readily available (read affordable in cost and effort) for use on our websites. (It's perfectly OK to use it on a desktop computer to create a graphic that is then displayed on a website.) We needed an alternative.
There are several sources for openly licensed fonts. One of the best is Google Fonts. When we searched for alternatives to ARMTB the most promising alternative was a Google font called Nunito. It looked pretty good, at first. However, it is only available in three styles; light, normal and bold. It doesn't have any italic style; that's a problem! Many programs, including browsers, will modify a standard style into an oblique to simulate an italic. While that's OK in many situations, it just wasn't good enough here.
We did a lot of searching before we decided to use Lato for our titles. We liked its looks in general and especially in its heavier versions. Importantly, it has a true italic style, also available in heavier faces. You'll see this font used throughout this website in headings.
Next, we turned to selection of a font to use for body text. There are probably hundreds of fonts that would suit our basic needs; but we wanted one that was just right. Our first objective was good readability on all devices and the second was attractiveness. We didn't realize it when we started but what we wanted was a font that was heavy enough to speak with some authority. We tried many different fonts before deciding on Roboto Condensed, again in a heavy weight. We like it, a lot, and hope you do too.
We will be using these new capabilities on some/many/all of our future Drupal 7 projects. Of course, the choice of which font to use for a particular website is determined by the client.
Update:
I directed a client to this post some time after writing it. My intent was to suggest that they visit Google fonts and select fonts for their website that specifically convey their desired look and personality. Instead the client's response to other members of their team was something like "I'll defer to Curt's judgement; we can use..." The point of this post isn't to sell anyone upon my choices. The point is to suggest that every client consider their needs and wishes and select fonts that convey their message.
Also, please note that all of the Google web fonts area available in True Type format that may be freely downloaded and installed on your computer(s) for use in your documents, graphics, etc.
Disclaimer: Unfortunately, common parlance has corrupted a number of terms used in the computer industry. One of those corrupted terms is font. While the term really means a combination of size, weight, and style of a typeface, it has come to be used as a synonym for typeface. That corruption has become so commonplace that if you do a Google search for Google web typefaces the first entry on the page will be Google Fonts. In this case, we'll succumb and use the common parlance.