Having a cool website with amazing content is just part of the many ingredients which will determine how well it is received by your readers and how nice the user experience is.
Another crucial aspect of your website is its typography.
Typography is a term which relates to your site’s fonts and the overall arrangement of the type, or letters and other symbols which make up the words on your web pages.
This includes things like font-family, font size, line height and many other things which determine how the text on your site appears to visitors of your site.
Typography is a skill and art on its own, but every web site owner should at least be aware of what it is and how they can apply it to their own websites.
When you look at a random selection of websites, you will notice that not all share the same type of typography. In particular, different sites use different font families to display their content.
The selection of font family is usually based on the style which the administrator wants to convey for their site but also on the readability of the font too.
One free and handy way to increase your choice of fonts you can apply to your site is to use the vast array of font families available in the Google Web Fonts directory.
In this article I will show you an easy way to add any selection of Google fonts to your WordPress theme via the use of a child theme. The Google fonts you choose to select and how you decide to display them is up to you.
In my example I will be using the WordPress native twentyeleven theme.
Step 1: On your computer, create a new folder for your child theme.
We’ll call it twentyeleven-plus for our example.
This will be the name of our child theme.
Step 2: Inside this folder create a file using a code editor and call it style.css.
This file will represent our child theme.
In the style.css file enter the following code:
/*
Theme Name: twentyeleven-plus
Theme URI: http://yoursitename.com/
Description: Child theme for the Twenty Eleven theme
Author: Your Name
Author URI: http://yoursitename.com/
Template: twentyeleven
Version: 1.0
*/
@import url("../twentyeleven/style.css");
.entry-content {
font-family: "Dosis";
font-size: 16px;
line-height: 25px;
}
The comments representing the first 7 lines and the line with the “@import†statement are the minimum things you need to create a child theme. Therefore in this case we are simply giving the child theme a name, description, version number etc.
The import statement basically allows us to inherit all of the styling from the parent theme’s style.css file.
Now the beauty of child themes is that we can choose to overwrite some of that styling with our own modifications. This brings us to the next 5 lines.
The CSS code you see there for the “.entry-content†class is where we are applying our own customisations for the font of the text in posts and pages.
(Note: We used firebug to determine what the classname is for the text in our post body and in your case if you are using a different theme the classname may also be different. Therefore you are encouraged to do your own investigations with firebug.)
In this code we are instructing our child theme to use the Google font family called “Dosis†for our post body text and in addition we are setting the size of the font and the line-height.
(Note: We just chose this font as an example. You can change this to another font family name if you wish. Just go to the Google Web Fonts directory and copy the name of font but beware to get the exact spelling and case correct.)
Step 3: Create a new file in your child theme folder called functions.php
In order to be able to use the “Dosis†font from the Google font directory on our site we will need to reference this font family in our page’s head section.
There are a few ways to include a Google font family on your web page and one of them is to paste the following line in between your <head> tags:
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Dosis' type='text/css' />
But since we have the luxury of using a child theme, we will avoid hacking our theme header.php file and we will use the new file which we created in our child theme folder called functions.php.
Inside the functions.php file, write the following code:
<?php
function load_google_fonts() {
wp_register_style('googleWebFonts', 'http://fonts.googleapis.com/css?family=Dosis');
wp_enqueue_style('googleWebFonts');
}
add_action('wp_print_styles', 'load_google_fonts');
?>
With the above code we are elegantly using the WordPress “wp_print_styles†hook to register and enqueue the google web font family we need. The end result of this code means that our web page’s <head> tags will all include the reference to the Google font family called “Dosisâ€.
Handy tip: If you wanted to use more than one Google font then you can easily specify multiple font names by using a pipe character (|) to separate the font names. For example, if we wanted to add “Orienta†and “BenchNine†in addition to “Dosis†we would change the line of code which registers the fonts to the following:
wp_register_style('googleWebFonts', 'http://fonts.googleapis.com/css?family=Dosis|Orienta|BenchNine');
Step 4: FTP the child theme folder to the “wp-content/themes/†folder of your WordPress installation.
Step 5: Log into the WP administrator panel and go to the “Appearance->Themes†menu.
You will now be able to see your new twenty-eleven child theme which in our case is called twentyeleven-plus.
Click on the “Activate†link to activate your new child theme as shown below:
And you’re done!
Now when you view your site’s posts or pages you will see that the new “Dosis†font is being used instead of the default theme font which was “Helvetica Neueâ€.
See the following figures for a before and after comparison.
Before Using Google Font
After Using Google Font
As you can see, by using our child theme we have successfully been able to apply Google fonts to our site with no hacking of our main theme files.
About the Author: This post was written by Peter Petreski who is an author for Tips and Tricks HQ.
Dear Peter,
This work perfect and beautifully for my site. I just want to express my thank to you!
cliff
@Jane, When you use a font that needs to be loaded from an external site it will hurt the page load time slightly. If you keep the font reference to a minimum then the impact should be negligible.
Cool. I have often wondered how to use other fonts one system fonts on the web. Do you know if it will slow down the response time for the website?
Interesting way! I only placed code in the header.php like this:
.
It works, but if I install a new theme I have to repeat it for the new one.
Hi
Its really Great article! well in my point of view it would be pretty cool if word press, by default, had Google Fonts included into it, but this seems easy enough. Thanks for explaining in right & easy way.
I see absolutely no difference in the font with the example you presented. Perhaps you should use a font that is in stark contrast to the original, unless I am missing something.