During the I/O developer conference in June 2010, Google introduced the Google Font – a series of open source font, that you can embed and use on your site. All the fonts are hosted on the Google server, so any browsers can utilise it without much effort. At the moment, there are 18 different fonts (as of this post) that you can choose from and I am sure more will be added to the library in the future.
Previewing the font
In addition to the Google Font, Google also released the Google Font previewer that allows you to preview the font before embedding it to your site.
The usage is simple. You just have to type in some custom text, play around with the settings (font family, size, variants, spacing etc) to find the best fit for your site.
Once you are satisfied with the result, simply grab the code and embed it into your site design.
Embedding Google Font to your WordPress site
If you are using a WP-powered blog, here’s how you can embed and use Google font in your site. Go to Google Font, find your favorite font and grab the “Embed” code. For example: Open up the “header.php” file in your active theme folder. Insert the code before thetag.
To use the Google Font throughout the site, open your “style.css” file from the active theme folder and paste the remaining code that you grabbed from the Google Font site. Alternatively, you can change the css accordingly if you are only using it for a small part of your site. For example Save the header.php and style.css file and upload them back to your server. If you are using a cache plugin, don’t forget to clear your cache. That’s it. Try it out and let us know if it works for you. Image credit: til01
