The Google Fonts Webfonts API is a powerful tool that allows you to easily load custom fonts onto your website. Unlike standard desktop fonts like Arial, Georgia, Times New Roman, or Helvetica, custom Google fonts can be referenced in a stylesheet in your site’s header tag. If you are developing WordPress themes and want to customize your site fonts without the use of a plugin, you can easily enqueue custom Google fonts on your site for use in your CSS.
Step 1: Select Your Custom Google Font
Using Google fonts is very easy. Simply head over to the main page at “Google Webfonts” and click on any font. A little pop-up will appear so that you can customize the font and view the correct URL for the font CSS.
If you are creating a simple HTML site or editing your personal custom WordPress theme, all you need to do to load the custom font on your website is copy and paste the stylesheet link to the custom font hosted on Google into your
tag (located in header.php in WordPress).That said, the preferred way of adding the Google font to your WordPress theme (very important when creating themes for distribution) is to make use of the WordPress wp_enqueue_scripts action hook.
Step 2: Enqueue Your Google Font
As mentioned earlier, you can easily drop the code from Google into your header.php file. However, it’s best to enqueue the script via the action hook as noted previously. This allows for easier child theme modifications and also prevents conflicts with third-party plugins.
To start, paste the following code into your functions.php file (if this file doesn’t exist, create a new one in your theme’s folder and make sure the code below is pasted within PHP tags):
function myprefix_enqueue_google_fonts() {
wp_enqueue_style( ‘roboto’, ‘https://fonts.googleapis.com/css?family=Roboto’ );
}
add_action( ‘wp_enqueue_scripts’, ‘myprefix_enqueue_google_fonts’ );
In this particular snippet, we used the wp_enqueue_style function to load the “Roboto” Google font on the website. However, you can use this function multiple times to load multiple fonts.
Step 2: Customize Your Google Font
Now you just have to open your style.css file and change the font name for the elements you want the custom font for or add some Custom CSS to your site to alter the font such as the following example to change the whole body font to Roboto:
body { font-family: “Roboto”; }
Extra: Using a Google Fonts WordPress Plugin
Of course, if you are not developing a theme for distribution or you are not using a child theme for your project, then it may be best to use a custom plugin for adding fonts to your site. In the article titled “Improve Your WordPress Website Typography With Google Fonts,” we recommend some awesome plugins that will allow you to easily alter the fonts on your WordPress site and more specifically using Google Fonts.
Your Thoughts…How Do You Use Google Fonts?
On to you now! Let us know in the comments how you are using Google fonts in WordPress. Are you developing themes or plugins, creating custom websites, or are you a freelancer helping people tweak their current site designs? Also, let us know what some of your favorite Google fonts are. My personal favorites are Roboto, Lora, and PT Serif.
