As of Get Noticed 1.5.0, you can add custom font stacks into the Theme Customizer. Here are some simple instructions for adding Google Fonts to your site.

Go to https://www.google.com/fonts, and pick a few fonts you like. Limit your selection to one or two. I’ve selected “Ubuntu” and “Titillium”. Once you’ve made your selection, click the “Use” button the lower right.

Screenshot 2015-05-29 21.01.00

 

 

You’ll need to make sure the font you’re looking to use includes 4 things:

  • Normal 400” Used for normal text

  • Normal 400 Italic” Used for italic text

  • Bold 700” Used for bold text

  • Bold 700 Italic” Used for bolded-italic text

If you are missing one of these 4 options, that text style(s) will not display properly. If you know you won’t be using a specific style of text, that option can be omitted. For example, I know I won’t need bolds or italics in the places I want to use Titillium. Also, keep an eye on the gauge on the right. Loading too many fonts can severely slow down your site.

Screenshot 2015-05-29 21.03.01

 

 

Once you’ve selected the styles you need, scroll down to “3. Add this code to your website:”. Switch to the “@import” tab and copy the code.

Screenshot 2015-05-29 21.03.33

 

 

Login to your site and go to Appearance > Customize. In the left menu, paste the code into the “Custom CSS” block.

Screenshot 2015-05-29 21.04.48

 

 

Back on the Google Fonts page, we’ll need to copy the “4. Integrate the fonts into your CSS:” codes.

Screenshot 2015-05-29 21.05.40

 

 

Next, go to Overall Styling > Fonts. Under “Custom Font Stacks” paste the codes. Replace font-family with something meaningful. I used FontUbuntu and FontTitillium. Make sure there are no spaces in this title. Once you’re done, click “Save & publish”. Then refresh the page.

Screenshot 2015-05-29 21.07.23

 

 

Finally, change your fonts! I went to Post Styles > Headers (H1-H4), and changed some of the font options.

Screenshot 2015-05-29 21.11.14

4 Comments

  1. John Burge

    Hey David – thanks so much for this guide. I would have been lost in this theme without it. This helped me get a client set up with some custom fonts without using a child theme.

  2. LadyE

    Greetings Dave: Thank you for this helpful tutorial. I followed the steps you provided, but I am having trouble adding more than one font (for some reason I am only able to select one custom font for my post titles and headings, even though I have attempted to load two in the custom font stacks). Another question I have is: since so many script fonts tend to have only one style (often no bold or italic), does that mean we absolutely cannot use them?

Leave a Reply

Your email address will not be published. Required fields are marked *