Adding Interesting Fonts to your WordPress Site with Google Web Fonts
Standard HTML and CSS together provide web designers with a great wealth of creative options. However, one of the ways in which standard CSS is lacking is in the category of font options. The fonts allowed within standard HTML and CSS are typical, easy to read fonts like Georgia, Times New Roman and Arial to name just a few. Fonts like these will undoubtedly make up the majority of typical (boring) website copy.
Therefore, many designers and webmasters prefer to spice up their WordPress sites by using unique and interesting fonts. The problem is that most do it the wrong way. For example, they will come up with the quick fix (which is actually not so quick) of creating an image with their custom font and using it on their site wherever they need the specific font to appear (Most often in place of H1, H2 and H3 text).
This is a time consuming process that negatively impacts your sites’ search engine optimization (SEO) because search engines like Google and Bing can’t read text placed in images. Search engines also seem to place more importance on text in headings and titles (e.g. H1, H2, H3). Therefore, removing your text-based headings for images does double damage to your SEO.
Fortunately, Google offers a free service called “Google Web Fonts“. Google Web Fonts allow you to use their massive library of unique fonts by placing only two lines of code in your WordPress site. Some WordPress themes such as the Canvas theme, are already integrated with Google Fonts which makes them even easier to use via the Canvas Theme Options control panel. However, if you use a WordPress theme that is not currently integrated with Google Fonts, then follow the steps below…
Using Google Fonts in Your WordPress Site
Step One: Go to http://www.google.com/webfonts
Step Two: Select the Google font you would like to use > click “Quick Use,” on the lower right under the font sample
Step Three: Choose the styles you want (if applicable, not all fonts will offer multiple styles)
Step Four: Scroll down to step 3 > Copy the code listed
Step Five: Access your sites files via FTP (For more on FTP see our article on managing your site using FTP) > Locate “header.php” (typically found at wp-content > themes > your theme > header.php) > If you are using a child theme (tip: you should be, see our article on setting up a WordPress child theme for more information) copy header.php and move it to your child theme’s folder > Back up the file by right clicking it and downloading a copy to your desktop (If something goes wrong you will be happy you have this)
Step Six: Open header.php with a text editor > Look for the start of your head section (You can tell where the head section starts by looking for the head element, which looks like this “<head>”) > Add the code you copied from Google directly under <head> and Save the file > upload it to your theme’s folder
Step Seven: Return to the fonts page in Google Webfonts > Scroll down to step four, and copy the CSS code
Step Eight: Return to your sites files via FTP and locate “style.css” (Typically found at wp-content > themes > your theme > style.css) > Back up the file by right clicking it and downloading a copy to your desktop
Step Nine: Open style.css and find the font and element you would like to replace (The line will look similar to the one you copied) > Replace it with the line you copied > Save the file and upload it to your themes folder
Step Ten: Return to your site > Refresh the page and Google fonts should now appear on your WordPress site
Important Notes on using Google Fonts:
- Using too many different fonts on your site will slow your pages load time and possibly clutter the design. It’s a good idea to stick to just 2 or 3 Google Fonts per page, tops.
- There are a number of Google Fonts WordPress Plugins available such as; WP Google Fonts, Fontific | Google Fonts, Ultimate Google Fonts and Google Web Fonts Manager. Our focus in this tutorial was to show you the basics of how to install Google Fonts manually on any WP site but we encourage you to test out some of the available plugins as well and let us know how they work for you by leaving a comment below.