One of the simplest changes you can make to your blog is to change the default fonts that come with your theme.
Choosing the right font combination can make your blog go from dull and boring to fabulous looking in a matter of minutes – and all you did was change the fonts.
For quite a few years now, Google has been an excellent resource of free fonts that are easy to implement on your own website.
What’s more Google even gives you instructions on how to include the desired fonts on the website. However, Google’s instructions are not really designed to work with WordPress.
Today, we take a look at how you can easily add Google Fonts to your WordPress blog.
Adding Google Fonts with a plugin
One of the easiest methods to add Google Fonts to your blog is by using a plugin. There are several options available, however, not all plugins are created equal.
When choosing a plugin; pay attention to the overall rating and the date of the latest update. You want a plugin that has been recently updated which shows the plugin is being actively maintained; as well as the one that has at least 4 star rating.
Easy Google Fonts
Easy Google Fonts is my #1 choice in this case. It has a 5 star rating and it’s actively maintained. This little plugin allows you to pick and choose between any of the fonts listed in the Google Font directory.
What’s even better is it integrates with WordPress’ native customizer allowing you to get a live preview of the chosen fonts.
You can customize any font aspect and create custom font controls in your dashboard. There is even an option to enter your Google API Key which will allow you to update your theme any time Google Fonts gets updated with new fonts.
When it comes to customizing the fonts, you get complete control over the fonts’ styles, appearance and even positioning.
You can change the font’s color, size, and choose between different font weights. You can choose a different font for your paragraphs and each of the 6 headings.
Google Font Manager
If you are looking for a way to have Google Fonts available in your post editor, then Google Font Manager is the plugin of choice for you. You will need to sign up for Goole API Key to work with the plugin, but the process is simple and straightforward:
1. Click on the link provided after the installation
2. Scroll down till you see Webfonts Developer’s API
3. Activate it
4. Create API key in your Credentials area under API & auth menu
5. Enter the API key in your WordPress dashboard
The plugin itself also has a link to a Youtube video that explains the process as well.
From there, you can preview any of the Google Fonts and select desired styles for your website.
An added bonus is that with this plugin you can even use Google Fonts in your post editor.
Adding Google Fonts without a plugin
Finally, you can add Google Fonts to your blog without the use of plugin, by manually inserting a few lines of code in your functions.php file and adding the correct selectors in your style.css file.
As always, it is recommended to do all of the code modification via child themes so you don’t lose the changes when theme update is released. You should also backup any files before making changes and if you’re uncomfortable making and changes with code, consider using one of the plugin options above.
The first thing you need to do is go to Google Fonts directory and select the fonts you want. It is recommended to limit your choice to no more than 2 to 3 fonts as adding more fonts increases your page load time.
Luckily, Google shows you exactly what kind of impact the selected fonts have on your page loading time so choose accordingly and choose only the styles you know you will use.
After you have selected the fonts, copy the little section of code that Google gives you and paste it into a text editor such as Notepad. The code will look like this:
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>
Copy everything after href= up to but not rel=’stylesheet’. Open up your functions.php file and add this bit of code to it:
function load_fonts() {
wp_register_style('et-googleFonts', 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300');
wp_enqueue_style( 'et-googleFonts');
}
add_action('wp_print_styles', 'load_fonts');
This method makes use of wp_enqueue_style function which is the proper way of adding styles and scripts to WordPress.
The last thing to do is to add the proper selectors to your stylesheet file. Open up that file and find the body selector. Replace the font provided there with your desired font. The end code will look similar to this:
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
color: #000000;
}
You can do the same for your headings. Make sure you are using a child theme or custom CSS option as noted above, or your changes will be lost when the theme updates.
Conclusion
As you can see there are several methods for adding Google Fonts to your WordPress theme.
The easiest way is with plugins, but adding a few lines of code isn’t that hard either, and it is my preferred method instead of installing a plugin for simple changes.
Of course, select the method that is easier for you and keep in mind the methods and tips outlined in this post.
The post How To Add Google Fonts To Your WordPress Theme appeared first on WP Superstars.