Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Out of the box the twentytwelve theme uses a font from the Google Fonts library called Open Sans as its main font. Earlier in the course, I used CSS in my child theme to override that font so that we are instead using Georgia. But now I want to replace the Google Font Open Sans with a different Google Fonts using a function and enqueuing a style sheet. Before I do anything else, I need to get rid of the styles in the child theme style sheet that are causing the site to display using the Georgia font.
So I'll go to my child theme, find the style.css file, and find the style that's causing Georgia to be used. It's right here, so I'll simply remove that style and save the style sheet, go back and reload the page, and now we are using Open Sans as we should. The next step is to get rid of the Open Sans font, and here is something really cool. If you open functions.php from twentytwelve and scroll down a bit, you'll find a section where Open Sans is added. It's right here.
But you'll also find that the people who built twentytwelve were really meticulous when they added documentation to do theme. So they explain everything that's going on and they also gave you examples of how you can turn things on and off. One of those things they give examples of is how to disable, in a child theme, the font. They say you can use wp_dequeue_style, and they even give you code example to do just that. So can simply copy the code example, open your child theme functions.php file, and paste the code example right in.
You have to do a little bit of cleanup here so that it looks better. And then before we save, it we should take a look at this function and see what's going on. What's happening here is we are creating a function. It's called mytheme_dequeue_fonts, and all the function does is it dequeues the style that's called in twentytwelve fonts. So if we jump to functions.php from the parent theme, you'll find that here we are enqueueing the style twentytwelve-fonts, so all we are doing is just dequeuing this function.
To make it all work there is an add_ action call, and the add_action call calls mytheme_dequeue_fonts down here and stacks it after the parent theme functions.php file has been run. That's why you have 11 at the end. So if I this, go back to my browser, and reload this page, you'll see that the font changes ever so slightly. That's because the font now fell back to the next option in the font family, which is either Helvetica or Arial or Sans Serif.
Now that I've gotten rid of Open Sans, I can add in my new Google Font in the same way that Open Sans was originally added, using an enqueue_style function. First I need to find the font I want, so I'll go to golden Google Web Fonts and search. Now, if you've never been to Google Web Fonts before, I highly recommend it. This is a large quantity of free fonts you can use on your website that are hosted by Google, so they don't really slow down your website. Once you find a font you like-- let's say this Archivo Narrow-- you see simply click Quick-use, select what weight you want to use, and then go down here where you can see the code you need to add this font to your site.
Here we have a link to a style sheet, and that's what I actually need, so I'll copy the link to the style sheet, go back into functions.php for my child theme, and then I need to add an enqueue style function into my child theme. I already have a function here that is running, so I might as well just add it to that function. So I'll go down here, say wp_enqueue_style. Then I need to give my new style a name so I'll steal the name from the actual font.
This font is called Archivo Narrow, so let's say ArchivoNarrow, comma, and then I need to put in the URL to the style sheet itself. I'll just paste that in, end the parentheses, and a semicolon to end the function. So now an addition to mytheme_dequeue_ fonts dequeuing the original font, it's also enqueuing a new font. I'll save this, reload my browser, and as you can see, nothing happened.
That's because although we now enqueued the font style into this site, we're now telling the site to use the font. Just to make sure that everything is working, we need to make sure that we actually have the font style sheet in our site. We can use the Developer tools to do that. If we go Ctrl+Shift+I to open the Developer tools and then go to Resources and your own site here, WordPress and then under Stylesheets, you should see the link to fonts.googleapis.com. And if you click on it, you get the styles for this font.
Now that you have the styles for the font, you can activate it on your site. If you look closely at the page from Google Fonts and you scroll all the way down, you see here there is an example of how you can use this font. You simply add this font-family. So what I am going to do is go back to my style.css file, create a new style for body, paste in font-family Archivo Narrow, and then just close the body style. I'll save that, reload my page, and now you see we're using the new font instead of the old one.
Get unlimited access to all courses for just $25/month.Become a member