How To Make Your WordPress Site Good Lookin’ With Google Fonts

Well, that’s the claim that Google itself makes and whilst it might not turn every ugly duckling into a swan, a good font can make a significant improvement.

Google has hundreds of free, open-source, web-ready fonts that you can use to give your WordPress site an instant facelift.

In this WordPress Weekend Project, I’ll show you a quick and easy way to install Google fonts and transform your site’s text.

About Google Fonts

There are currently 629 Google Fonts, which means that it will actually take far longer for you to choose a font then it will to actually implement it on your WordPress site.

The fonts are tied into the CSS for your site and are downloaded from Google as part of the webpage, which does give rise to the possibility of some lag time on the initial download – you may have experienced this on some sites as the text suddenly changes font.

However, after the initial download, the font is cached in the browser removing the lag for subsequent pages.

Browser compatibility is good:

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Any non-compatible browser will simply fallback to the original font. The fonts also play nicely with Android 2.2+ and iOS 4.2+.

Installing a Google Font

Install the Google Typography Plugin

You can manually update a theme to use a Google Font but, of course, there is a plugin (several actually) so that’s the path we’ll take.

We are going to use the Google Typography plugin by Eric Alli, so either download it from the repository and upload it into your site or simply search for it from your Dashboard’s plugin page.

NOTE: The plugin’s compatibility is set to 3.5.2 but I’ve tested this on 3.7.1 and experienced no issues.

Pick Your Font

The Google Typography settings page does have a preview of sorts but it’s probably easier to pick your font by going to the Google Fonts page and browsing the fonts there.

Applying Your Font To Your WordPress Site

Once you have selected your font, go to your WordPress Dashboard and click on Appearance > Typography to get to the Google Typography Settings page, and:

• Click on Add New
• Select the desired font from the Font Family dropdown (you can start typing and it will find the font)
• Change the color if you don’t want black
• Enter an asterisk (*) in the CSS selectors input
• Click Save

Now, go to the front end of your site and click on refresh and you should see your site with all text displayed using the new font.

That’s happened because we used the * in the CSS selectors. Weight (bold) and size are retained from the original CSS, so this is a really very simple way to make a global font change to your site.

Of course, you can get really specific and apply a completely different font, complete with size and weight, to only certain elements of your site by entering the appropriate CSS selector.

For example, to change just the menu on TwentyTwelve theme, you would enter .nav-menu>ul>li>a in the CSS selector input box.

Using multiple fonts allows you to customize to your heart’s content but don’t go overboard and don’t forget that every font needs downloading, so judicious use is the best approach.

Applying fonts really is that easy and it’s simple to remove them too (either delete the font or deactivate the plugin) so why not spend fifteen minutes this weekend trying to make your site better looking?

Tags:

• fonts