Embedding Google Font to Your WP Blog

How many of you actually tested your website design on different browsers and computers before you launch the site? I bet few of you do. Do you know that what looks good on one OS (for example, Mac) can really look bad on another, such as Windows? The main reason is because the fonts used in the Mac system is not available in the Windows OS. Substitute font is used by the computer (without the font) and this can really screw up your web design. A good way to overcome this is to use a web font that is supported by most browsers, so that your site will look essentially the same regardless which browser or computer you are using.

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 the </head> tag.


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

Building Interactive Longform Storytelling Contents on WordPress

Building Interactive Longform Storytelling Contents on WordPress

This ebook is all about interactive longform storytelling: what it is, why you need to embrace it and its benefits, how to create one, and the available tools to help you create your first longform content.

Get it now! More ebooks »