I posted a few weeks ago about how Google Web Fonts has been vastly improved, making it really easy to use non-standard fonts on your websites.
Today I’m going to show you how to use Google Web Fonts on your WordPress site.
You may be thinking “Google provide clear instructions on how to embed their fonts, I don’t need you to tell me.” Well, yes they do. But there’s a much better way to do it, using the wp_enqueue_style function.
Once you’ve chosen your font, and any additional styles and character sets, Google provides you with a <link> tag which you are told to add to the <head> section of your page.
Clik here to view.
Google provides the code that goes in your <head> section
That’s fine. This is the correct code, and if you want to, you can simply open your header.php template and paste this code in directly.
Think of the Children
The reason this is not best practice when using WordPress has to do with child themes.
If you build a child theme, it inherits all of its theme templates from the parent theme, unless you give it its own copy of a particular template. So if you copy your parent theme’s header.php into your child theme, so that you can add the Google Web Fonts code to it, then any changes made to the parent theme’s header.php will no longer be applied to your child theme.
So what we want to do is insert the code dynamically into the header, so that we don’t need to edit the header.php template at all. We do this in functions.php
The difference here is that in a child theme, functions.php doesn’t override the parent functions, it runs in addition to them. So any functions in your child theme will be run after all the functions in the parent theme have been run.
So, to dynamically insert the Google Web Fonts code into the header, we use the wp_enqueue_style function, because the code Google gives us is a stylesheet declaration.
1 2 3 4 5 6 | function load_fonts() { wp_register_style('googleFonts', 'http://fonts.googleapis.com/css?family=Rock+Salt|Neucha'); wp_enqueue_style( 'googleFonts'); } add_action('wp_print_styles', 'load_fonts'); |
We create a function, load_fonts, which registers the stylesheet declaration under the name ‘googleFonts’, using the URL provided by Google. It then enqueues the style ready to spit it out into the header. The add_action part does the actual spitting.
Now the code that Google gave us will be automatically included in your header, and your child theme will still inherit the parent’s header.php
It’s good practice to add any additional stylesheets to your theme in this way, and the same goes for scripts, which can be added in a similar way using the wp_enqueue_script function.
Using these methods will keep your themes portable and plugin-friendly.
The post Using Google Web Fonts with WordPress, the Right Way appeared first on Web Design from Scratch.