How to Manually Load Google Fonts in WordPress
The Google Fonts Webfonts API allows you to easily load custom fonts (as opposed to standard desktop fonts like Arial, Georgia, Times New Roman or Helvetica) simply by referencing 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 font’s is very easy. If you head over to the main page at “Google Webfonts” and click on any font a little pop-up will appear so that you can then customize the font and view the correct URL for the font CSS.
If you are creating a simple HTML site or you are editing your personal custom WordPress theme all you need to do to load the custom font onyour website is copy and paste the stylesheet link to the custom font which is hosted on google into your <head> 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 3rd party plugins.
Step 1: 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: 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 you 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.
Hi, how do I do if I want to register multiple google webfonts?
I know I can paste it multiple times, but is there any better way to do that?
This is an old post…I don’t really recommend adding Fonts like this anymore. You should check out this plugin, it might work great for your needs:
http://www.wpexplorer.com/google-fonts-pro
Good tutorial google do good work. 🙂
A small question how do if I want to add 10 fonts?
Thinking about a solution and I do not know if it’s good to put this code in header.php
each time for each one…
Hi,
Every time I load my website it loads with the Times Roman font and then switches to the original one. It seems like a small jerk for a millisecond. Can you please assist me that how I can fix this issue.
That’s just your fonts loading – nothing to worry about. But you could consider editing your site to preload your fonts if you’re worried about it (checkout this WP-Rocket guide).