designer tricks - test many fonts on your site
When designing font-orientated sites like my very own oodavid.com it’s wise to test different fonts to make sure you’ve found just the right match for the job. Using modern techniques it’s pretty straightforward to just include a new font from google fonts or another font repository then tweak your CSS to fit the match. Pretty simple stuff really.
But what about when you want to test hundreds of different fonts? In those scenarios it’s best to automate those changes so you can just cycle through a ream of fonts to try them out for size. If you are a jQuery user, then you can use something like this in your console:
$('head').append('<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lobster+Two&v1&v1" />');
$('body').css('font-family', "'Lobster Two', arial, serif");
As you can see this is site specific code but would be easily adapted to fit the needs of your project. In my case I am just using a single font on the body element and allow it to cascade down through the DOM.
If google fonts had an API to retrieve a list of all available fonts I would consider writing a jquery plugin or chrome extension to do the dirty work… one for the backburner!
PS - This blog post was drafted several months ago and has suddenly become relevant; Google Fonts has an API! Once there is a break in my workload I’m going to bash out a Chrome Plugin. As my friend Tim Walker would say… SMASHY BASHY.
- http://code.google.com/apis/webfonts/docs/developer_api.html#Auth
- https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY
PPS - Turns out I’ve already published a post like this. Oh well :-)
