Tuesday, May 25, 2010

Wordpress with Google Fonts

If you’re visiting this site on any modern browser (other than iPhone/iPad/Android), you’ve probably noticed the custom fonts I’ve used for the headers and body. This is all thanks to Google’s new open-source font library.

It’s so good to see a competitor to typekit, especially a free open-source option that anyone can use. Now, getting set up to use these new fonts on any website is relatively easy if you’re familiar with using Google’s AJAX Libs (which I recommend for your jQuery and swfObject hosting needs), but it’s even easier if you’re running Wordpress site.

The Wordpress Google Fonts Plugin worked great for me when setting up this site. You basically just install it and tell the plugin which styles you want to override with Google Fonts. There were some minor gotchas around my specific template and specific styles, but nothing that I couldn’t get around by modifying the styles.css.

I highly recommend Google Fonts and the Wordpress Plugin.


  1. Apparently Typekit has integrated the GoogleFonts into their now opensourced WebFontsLoader (http://github.com/typekit/webfontloader) so you can avoid the evil FOUT (Flash of Unstyled Text) ... if you care. Good to know about the WP plugin, thx.

  2. johnlindquist3:27 PM

    Good to know. If this was a client site, I would care about FOUT. Since it's my blog, I figure the readers can suffer ;)

  3. I wonder if using a plugin for using/rendering custom fonts might decrease the site's performance, i.e., loading time (which might again have negative impact on the site's pagerank. Do you have any idea?

  4. There is an alternative Ultimate Google Fonts plugin for Wordpress with beautiful CSS text effect tips http://www.sramekdesign.com/wo.../