HostGator Web Hosting

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.Google Fonts Tutorial

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.

HostGator Web Hosting

2 COMMENTS

  1. Aloha and mahalo for your nice video explanation of getting Google fonts onto WordPress. I did it a very different way – installed Google Fonts, and then copied and pasted the fonts into the Google fonts found in “Settings”.
    Seemed much easier – did it get easier, or is it better to do the inserting into fttp? I hope you say it is okay to do it the easy way because I am really not too programming minded at all.
    So, my question is, once I have the fonts loaded into the Google Fonts setting, I can choose the elements where it will show up when I hit “show options”. I figured out that “paragraphs (p tags)” is the body of the articles/posts. Then there are 6 choices for Headline 1 to Headline 6. What is the difference between the different headlines?

    Also, what is “Blockquotes” and also what is “Lists (li tags)”?

    Thanking you in advance,

    Aunty

    • Hi Aunty,

      If I had to guess I would say your theme has built in support for Google fonts. It’s not in WordPress by default, and not in very many themes, but if you were able to do it that way, and it worked, then go ahead! It certainly sounds much simpler than the hard-coded way.

      The different headlines are there for a few reasons. First and foremost they tell search engines how to sort the content, h1 should be the general theme of your page, h2 should be headers or sub sections, h3 further subsections etc.

      There’s typically not a reason to go beyond h3, doing so won’t do much for your SEO, but you can set different styles (fonts, sizes, etc.) to the different headlines to create different layouts.

      Block quotes are inserted by using the ” symbol in the rich text editor and are off-set sections of text. How they appear is determined by your sites .css file. You’ll notice these on sites like the Huffington Post, when they offer up a long quote, it will be in block quote format.

      List tags are HTML tags used to generate ordered and unordered lists. For more information on list formatting see this article.

      Hope this helps and let me know if you have any more questions!

      -Adam

LEAVE A REPLY