Google Web Fonts
If you’re looking for some expanded design options for your web site, Google’s Web Fonts gives you access to a growing collection of free open source fonts that you can easily link to in your CSS style sheet and display on your site. You can create detailed previews of all the fonts first to be sure you know exactly how your site’s text will look when you’re done.
Since it’s all done through a standard style sheet link you can specify alternate fonts that all users will have on their computers in the event that the Google fonts are ever unavailable or for whatever reason you can’t connect to them. CSS provides a reliable method for fallback, so I don’t see any risk to trying these out on your site.
Here’s the link that goes inside the <head> tag on your web page to load a web font (the Open Sans font, in this example):
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" >
And here’s a sample CSS entry where you need to define a font face (body, p, H1, H2, etc). You can—and should, as a practice—specify other fonts in the event that the primary one is unavailable.
font-family: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;
I just implemented it on this site using Droid Sans for the body text and Open Sans for the post titles and primary navigation along the top. I like the looks of it.
Filed under: Development, Free (or low-cost), Web-based Tags: design, google, open source | No Comments »
Leave a Reply