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.
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.
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.
Login to your site and go to Appearance > Customize. In the left menu, paste the code into the “Custom CSS” block.
Back on the Google Fonts page, we’ll need to copy the “4. Integrate the fonts into your CSS:” codes.
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.
Finally, change your fonts! I went to Post Styles > Headers (H1-H4), and changed some of the font options.
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.
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?
Can you post the settings you are using?
For the bold/italic, you are correct. If you try to use a weight that’s not available, the browser will pick something close.
If you are looking for something simpler to use, check the documentation on Adobe TypeKit: https://members.getnoticedtheme.com/documentation/how-to/adobe-typekit/