Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding a Google font through a function

From: WordPress 3: Building Child Themes

Video: Adding a Google font through a function

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.

Adding a Google font through a function

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.

Sometimes you have to do a bit more work to get your child theme to do exactly what you want. This example shows you the process of disabling and replacing a function to get a different result. You can use the same technique to disable and/or replace JavaScripts and other styles, and even some other core functions like menus, comments, and widgetized areas in twentytwelve. Basically, anything you find in the functions.php file of 2012 that's enqueued you can dequeue, and you can also enqueue any style and any JavaScript you want.

Show transcript

This video is part of

Image for WordPress 3: Building Child Themes
WordPress 3: Building Child Themes

45 video lessons · 33111 viewers

Morten Rand-Hendriksen
Author

 
Expand all | Collapse all
  1. 6m 59s
    1. Welcome
      1m 6s
    2. Using the exercise files
      1m 34s
    3. What you need to know before watching this course
      1m 29s
    4. Getting the right tools for theme creation
      2m 50s
  2. 17m 2s
    1. What is a WordPress child theme and when should you use it?
      2m 38s
    2. Picking a parent theme
      3m 55s
    3. Making sure you have the Twenty Twelve parent theme
      1m 50s
    4. Creating and activating a basic child theme
      4m 20s
    5. Importing parent theme styles
      4m 19s
  3. 16m 2s
    1. Using the developer tools
      3m 53s
    2. Modifying existing styles
      4m 24s
    3. Adding space between paragraphs
      4m 7s
    4. Changing font family styles
      3m 38s
  4. 31m 47s
    1. Understanding the WordPress template hierarchy
      3m 12s
    2. Modifying existing templates
      2m 33s
    3. Moving the header image
      4m 29s
    4. Adding Related Posts feature to posts
      6m 26s
    5. Creating custom page templates
      5m 43s
    6. Using conditional statements for customized effects
      5m 41s
    7. Creating custom header, footer, and sidebar templates
      3m 43s
  5. 17m 5s
    1. Understanding the different index pages and what they do
      4m 6s
    2. Adding author, date, and time information to the index loop
      7m 15s
    3. Changing the appearance of category index pages
      5m 44s
  6. 43m 5s
    1. Introducing functions.php
      3m 24s
    2. Overriding existing functions
      3m 23s
    3. Adding pagination to index pages
      5m 49s
    4. Adding to existing functions
      3m 21s
    5. Adding a new footer menu to Twenty Twelve
      6m 24s
    6. Adding a new widgetized area to pages
      4m 9s
    7. Adding static content to the sidebar
      7m 44s
    8. Replacing existing functions
      2m 36s
    9. Adding a Google font through a function
      6m 15s
  7. 10m 24s
    1. Adding new featured image sizes
      5m 41s
    2. Adding featured images to posts and pages
      4m 43s
  8. 31m 1s
    1. Adding a welcome message to the front page
      1m 22s
    2. Displaying page content in an index page
      7m 42s
    3. Hooking in a featured image
      4m 34s
    4. Making the welcome message responsive
      6m 27s
    5. Restricting content to the first page of the blog
      4m 22s
    6. Adding a jQuery function to show or hide the welcome message
      6m 34s
  9. 10m 23s
    1. Adding a custom favicon
      3m 58s
    2. Adding a custom screenshot
      2m 29s
    3. Adding footer information
      3m 56s
  10. 7m 14s
    1. What to do when a child theme crashes your website
      4m 38s
    2. Updating parent and child themes
      2m 36s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed WordPress 3: Building Child Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.