Sign in / Join

Adding Google fonts to WordPress

533
0
Share:

As you start to develop sites for clients, one of the requests you’re going to encounter at one point or another is that the fonts used on the site be different from your everyday web safe choices like Helvetica and Times New Roman. There are some paid options you can use to accomplish this, and we will examine those later this week, but if you’re looking for  a solid free solution then Google Web Fonts is something you should be taking a hard look at. Google Web Fonts offers designers and developers a large selection of free fonts you can use on your website. But, after you’ve made your choices, how do you go about adding them to your site?

Embed the font into your CSS

If, for example, you just wanted to use a Google font for your H1 tags but a standard font for your paragraph text, then you might want to consider embedding the font into your CSS. All you need to do is choose your font, grab the embed code, and add it to your header.php file.

(Example: <link href=’http://fonts.googleapis.com/css?family=Condiment’ rel=’stylesheet’ type=’text/css’>).

Then all you need to do is name the font like you would normally do in your CSS stylesheet

h1{ font-family: ‘Condiment’, cursive; }

And… voila!…you have installed a Google Web Font for your H1 tags. But what if you want to do more with Google Fonts? Well, of course, there’s a plugin (actually, a few of them) for that. Let’s check them out!

Supreme Google Webfonts

The first plugin we’ll have a look at is Supreme Google Webfonts. What this plugin does is allow you to use multiple fonts in both your posts and pages. It allows you to add Google Web Fonts, but, when I tested it locally, it also added the fonts I had installed on my machine. As an added bonus, it also installs a font size dropdown list that allows you to change font size.

google fonts

Here is the back-end view of the Supreme Google Webfonts plugin.

supreme google fonts

And here is how the fonts render on the front-end.

This is a great plugin for bringing in Google Web Fonts. I did find the drop down menu a little glitchy, but not bad enough for me withhold my recommendation of this plugin. It does a great job of providing font flexibility goodness right in the visual editor.

WP Google Fonts

The second font plugin we will look at is WP Google Fonts. This one also allows you to utilize Google Web Fonts but in a different manner than the previous plugin. Instead of allowing you to change fonts on a per post or per page basis, WP Google Fonts lets you set fonts site wide based on the typical tags you’d find in your CSS. The plugin offers a control panel setup page where you can pick and choose fonts and assign them to the various tags you’re likely to use throughout your site. If there was one suggestion I’d make to the plugin developers, I would say that the fonts dropdown list should serve as an example of the font. This would save some time for the user trying to determine what each font actually looked like.

google font wordpress

This is the control panel for WP Google Fonts. Nice and clean, easy to understand and use.

wordpress fonts

Above is an example of  how the various typographic elements of the post can have different fonts applied to them. So now that you can embed Google Fonts directly into your CSS or use one of the two plugins we looked at, you no longer have any reason to stick with Times New Roman.Not that there is anything wrong with Times New Roman….

Share: