Google Fonts, Child Themes, and @import

I’ve been trying to work through some issues after getting a comment on one of my fonts articles. It seems some people have been experiencing some problems getting Google Fonts to work on their child theme. So I was messing around with mine, and I experienced the same unpredictability. After messing around with things, I got mine straightened out, maybe this will help you!

What was driving me nutes, was that I followed the instructions perfectly. I went into IE developer tools and checked through my rules. My fonts had precedence, everything in the tool showed that my fonts were working perfectly, except – they weren’t! I could tell by simply looking at the page, no cool fonts! Well, here’s the deal.

I’ve seen many folks say that when setting up your child theme, calling in the parent themes css is the very first thing that needs to happen. Heck I even recommend that. Well, that bit of advice was what was blocking my fonts. I switched it up a bit, and it fixed everything. Here is the top portion of my child theme’s style.css:

Theme Name:     Voodoo Child 2011
Theme URI:      http://www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme
Description:    Child theme for the Twenty Eleven theme
Author:         Rev. Voodoo
Author URI:     http://www.rvoodoo.com
Template:       twentyeleven
Version:        0.1.0
*/
@import url('http://fonts.googleapis.com/css?family=Arimo|Lusitana:700');
@import url('../twentyeleven/style.css');

body, input, textarea {
	color: #373737;
	font: 17px Arimo, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}
#content .entry-title {
	font: 700 21pt Lusitana, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Notice I’m callng to Google first? It seems I have to do this if I want to freely use my fonts as expected. As soon as I did this, I could stop using !important in my css, and my fonts worked perfectly and predictably. I was then able to assign my custom fonts to my body and title (sans and serif respectively).

So, if you are trying to work with Google Web Fonts in your child theme and it isn’t working, give this a go and let me know how it works out for you!

3 Replies to “Google Fonts, Child Themes, and @import”

  1. Thank you soooo much! I’ve been going CRAZY for the past two days trying to figure out why, all of a sudden, my Google fonts don’t work with WordPress anymore! I was adding the font info into my function.php file (which has always worked for websites I’ve designed in the past), but for some reason it wasn’t working (may have something to do with updating WordPress). As soon as I used the @import in my styles.css file, it worked! Thanks you!

    1. I’m glad this article helped you out! How were you bringing the fonts in through functions.php? It should work that way as well. But I always just run it through my stylesheet.

      1. I just went through a tutorial on creating a child theme for 2011. They show how to use functions.php to add Google fonts. It worked perfectly on my localhost server. I think I may prefer your method though.

        There are a few problems with the tutorial (especially since it’s aimed at beginners). The code they show only imports one font when two are being used. Their example doesn’t use the pipe character to import more than one font.

        They mention a plugin that will create the child theme for you, but where they tell you how to do it yourself they don’t mention that you need to put your style.css file in a folder with the name of your child theme. That could really cause confusion for beginners. All in all still worth going through. I particularly liked the part that showed how to customize the comments section in twenty eleven. The link to the tutorial is http://www.webdesignerdepot.com/2011/12/creating-your-first-wordpress-child-theme/

Leave a Reply