How do I add a Custom Google Font?

Overview

The Theme provides a custom Google Font setting which applies only to the Theme’s headings. It does not add that Font to any other setting or CSS styles. This articles provides a custom solution for adding a custom Google Font to any CSS styles.

General Instructions:

  • Go to Google Fonts https://www.google.com/fonts
  • Search for the desired Font. You may enter its name in the search box
  • In this example we will use the Font: Indie Flower
  • Once the Font is found, click the Quick Use Button
  • Google Fonts 2014-04-16 13-55-40
  • Scroll down to section #3 and click the @import Tab and copy that code
  • Scroll down to section #4 and copy that code as well
  • Google Fonts 2014-04-16 14-00-56
  • So we now have copied:
  • @import url(http://fonts.googleapis.com/css?family=Indie+Flower); font-family: 'Indie Flower', cursive;
  • Now we just need to add the code to our CSS Styles
  • Go to Admin Menu > Appearance > Site Options > General Settings > Custom CSS area
  • And paste the copied code
  • Now to that code we need to add the correct CSS class to apply the Font to. In this example we will use body which will apply the Indie Flower font to the entire site. So the code will look like so:
  • @import url(http://fonts.googleapis.com/css?family=Indie+Flower); body {font-family: 'Indie Flower', cursive;}
  • Using another example, let’s say we want to use that Font in the Main Menu. The CSS ID for the Main Menu is: #menu-main-nav . So the code would look like so:
  • @import url(http://fonts.googleapis.com/css?family=Indie+Flower); #menu-main-nav {font-family: 'Indie Flower', cursive;}
  • The challenge is to find the correct CSS ID or Classes to apply the font to. You may look in the stylesheet style.css or we highly recommend using the Firebug plugin for Firefox. This tool allows you to “inspect” the site, and it will show you the exact CSS Classes or IDs used. Firebug can be downloaded here here: http://getfirebug.com/