If you have a presence on the web that’s not just Facebook, you ought to go check out the 444-and-counting free font families available at Google Web Fonts. They’re a great way to spruce up the look of your web site for very little work. For example, on this blog I’m now using Oswald for the headers, Droid Serif for the main text, and Inconsolata for the code blocks. (I’ve been using the former two for a few months now, and Mehul prompted me about trying the latter this evening). The headers are very sharp (I really like the condensed look of Oswald, but it’s a shame there’s no italic form – I dislike slanted roman a’s) and the code displayed by Inconsolata is very legible. The Droid Serif body text (what you are reading now) is readable without being tiring. All in all, I think it’s working out very well.
The Google Web Fonts page provides a neat web app to allow you to select the fonts you’d like to use on your site. Once you have created your collection (don’t forget the different weights and styles if they’re provided), the app gives you the <link> tag you should add to the HTML <head> element of your pages, and prompts you on how to change the CSS for the fonts you’ve selected. It also provides a bookmark so you can go back to your collection later.
As an example of what needs to change, the <link> statement was as follows for this blog:
<link href='http://fonts.googleapis.com/css?family=Inconsolata|Droid+Serif:400,700,400italic,700italic|Oswald' rel='stylesheet' type='text/css'>
I also changed the CSS to put the relevant fonts first in the list. For example, here are the styles for pre and code:
pre, code { font-family:Inconsolata, Consolas, "Courier New", Courier, monospace; }
After I’d changed the other places I’d specified a font family, I uploaded the two changed files (my page layout is a template) and voilà! What you are seeing is what you get.
Now playing:
Beloved - It's Alright Now (Back To Basics)
(from The Sun Rising)
Loading links to posts on similar topics...
4 Responses
#1 Drew Wells said...
10-Feb-12 3:00 PMI'm using Typekit but the Google Web Fonts are a great project. You might enjoy Google Web Fonts Families. Matt Wiebe, Soma Design, created the page grouping the GWF by family. Very handy.
#2 julian m bucknall said...
10-Feb-12 3:14 PMDrew: Very nice. Much easier to see the different font families. Actually there are several there I could use in the future.
Cheers, Julian
#3 Mehul Harry said...
17-Feb-12 3:39 PM@Drew, yes, very cool page.
@Julian, Anonymous Pro FTW! :-)
#4 julian m bucknall said...
17-Feb-12 4:32 PMMehul: And it's from one of my favorite font designers too, Mark Simonson.
Cheers, Julian
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response