Use Custom Google Font

How to use any custom Google Web Font on your FitProsites.com site!

You may have noticed on the theme customizer a Use Alternative Google Font text box under the Custom Font section. With this option you can use ANY font from the Google Web Fonts website. At the time of writing there are over well over 600 custom fonts to choose from!

google_font_customizer

So, how do you add a custom font to your FitPro site? Using our theme customizer it is surprisingly simple. Just follow these steps:

  1. Access the theme customizer via Appearance => Theme Customizer or from the Customize drop down menu on the front end of your site (when logged in).
  2. Expand the Custom Font section and you’ll see the Use Alternative Google Font text box. This is where you add your custom Google Web Font.
  3. Open the Google Web Fonts site, which looks as follows:

    google_web_fonts

  4. Search for a font you like and then click the Quick-use link.

    google_web_fonts1

  5. On the Quick Use page select the options you want to include with your font in section 1. Normally you can just leave the default selection, but sometimes certain fonts include support for italics, and bold etc. which you can select manually.
  6. Now for the important bit. In section 3 of the Quick Use page you need to copy the font link. This is the link inside the href attribute of the link tag. For example, for the Snowburst One font the link you need to copy is “http://fonts.googleapis.com/css?family=Snowburst+One” as shown in the image below:

    font_link

  7. Paste this link into the Use Alternative Google Font text box in your theme customizer, but make sure you only copy/paste the font URL and not the quotes around it. After a couple of seconds you will see the font change on your site in real-time!
NOTE: Be sure to click the Save & Publish button on the customizer to save your changes if you want to make the font change permanent.