Quickly put Google Web Fonts to work on your WordPress website

Using Google Web Fonts and a nifty plug-in, you can quickly spice up the typography of your WordPress powered site in under fifteen minutes with no coding required!

What exactly are Web Fonts?
The web fonts concept and implementation started out with a couple of subscription based services such as Typekit and Font Deck. In simple terms a website’s fonts are normally limited to the fonts available to the end user’s computer. The result is few choices for website display text, 3 families of san-serif type, 3 families of serif type and 3 ornate families (usually standard system fonts that most users would already have). Limited, but increases the success rate that your website is viewed as designed.

Web font services circumvent this restriction by loading fonts from a server directly into your page as it is served up to the user. This has a big pro and a big con. The big pro is you are no longer limited in which fonts you wish to use for your site. The big con is your page is going to load that much slower while the browser waits to acquire the font from the server. This can be mitigated a bit by only using the web font for headers and not body text.

What originally started out as a Google Labs experiment, Google initially offered about 30 open-source web fonts for free. Their web font website even had a live preview adjustment feature that generated this little snippet of code for you. When the kerning and leading looked appropriate in the preview, you just needed to copy the code and paste it right into your Cascading Style Sheet.

This week Google officially entered the fray of web type in full force, now with a barnyard of 185 fonts! ( growing by the day) In pure Google fashion this service is offered up to you free of charge.
I’m well aware not everyone is comfortable with editing their site’s cascading style sheets. Many install a WordPress theme closest to their liking and are just stuck with that existing style sheet and font unless the theme offers some advanced type adjustment interface.

So here is an easy way to get your site up and running with Google’s Web-Type. The beauty of  this method is it uses a plug-in,  so if for whatever reason these procedures break your theme, simply deactivate or  unintstall the plug-in and your site is back the way you had it. No editing of code necessary!  And once you’re up and running, you can change the fonts for your entire website; headers 1,2 & 3, paragraph and body text as often as you please with just a click.

So here’s what you do (note:  I’m assuming here that you are already aware how to use FTP to place files and folders to your website’s server)

  1. Download Adrian Hantf’s  WP-Google-Fonts Plugin from here : http://wordpress.org/extend/plugins/wp-google-fonts/
  2. Unzip the folder
  3. Place the unzipped folder on your server using an FTP program or your webhosts built-in file transfer application. Place the folder in your plug-ins folder located at wp-content > plugins
  4. Login to your WordPress dashboard and activate the plugin. It’s called WP Google Font
  5. Now comes the fun part! Head over to: http://www.google.com/webfonts
    Peruse all the awesome fonts!!!  Take notes of all the ones you like



  6. Once you have a good list of all the great new fonts you want to take for a spin, log-in to your WordPress dashboard . Under Settings select “ Google Fonts”.  The settings page allows you up to six font configurations at once (any combinations of body, Headline 1-6, Paragraph style and block quote

    You’re good to go, have fun playing with your site’s fonts!!!

    Cheers,
    Chris Sagert

    Share your thoughts

    This site uses Akismet to reduce spam. Learn how your comment data is processed.