Skip links

2 Ways to Add Google Fonts to WordPress Website

Share

Add Google fonts to your WordPress website and give the text a unique expressive style. Google web fonts allow us to go beyond standard web fonts like Arial, Verdana etc. So adding Google fonts offers to have a better visual appearance as well as website readability using great typography.

Google Web Fonts provides a large number of free web fonts and it’s very easy to use them. Here we’re going to explain how can you add Google fonts to your WordPress website without a plugin.

2 Ways to Add Google Fonts to WordPress Website

While there are a couples ways to add, I’m mentioning the two most preferred way to use Google fonts. First is linking the font stylesheet in the header.php file. The second choice is Enqueueing Google Fonts — The WordPress Way.

Other ways are downloading and/or importing the fonts, using JavaScript or use a plugin. These methods are less preferred to add Google fonts either due to complexity or performance issues. So install fonts using either one of the two ways mentioned below.

You Can Link Google fonts URL in the header.php

First of all, open Google Web Fonts page and select the fonts you like to add. The page is rich and built very well to test and select fonts. Here we’ve selected Lato and Open Sans fonts without any customization. You need to copy the link markup from the STANDARD tab as shown in the screenshot.

Select & add Google fonts

Now open the header.php file in your current theme. Paste the copied line as is between the opening and closing head tag and save the file.

<!doctype html>
<html <?php language_attributes(); ?>>
<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">

	<link href="https://fonts.googleapis.com/css?family=Lato|Open+Sans" rel="stylesheet">

	<?php wp_head(); ?>
</head>

It’s very simple. We can also add Google fonts using wp_enqueue_style() function as shown below.

The WordPress Way to Add Google Fonts

function rella_add_google_fonts() {
	 
	wp_enqueue_style( 'rella-google-fonts', 'https://fonts.googleapis.com/css?family=Lato|Open+Sans', array(), null );
	
}
 
add_action( 'wp_enqueue_scripts', 'rella_add_google_fonts' );

You need to write the code in the functions.php file of your WordPress theme. Here, we have used the value of the href attribute from Google font dialogue. Don’t forget to replace the link with your own in either method you use.

You might also like tricks to improve productivity in WordPress Visual Editor.

Add CSS Rules to Use Google Fonts

Be careful to not modify the parent theme in either case if you’re using one. As parent theme tends to upgrade, the next update will remove all your changes. So no matter if you’re using the header.php or WordPress function, add them to the child theme only. Additionally, theme framework/parent theme, as well as WordPress, provide enough hooks/actions to add Google fonts to the child theme.

Finally, we need CSS rules to use those fonts. The Google Fonts dialogue box provides corresponding CSS rules under “Specify in CSS” heading. We have copied them to add in a few classes as shown. Also, add rules either in child theme’s stylesheet or in options panel provided by parent theme.

h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', sans-serif;
}

p, .gf-opensans {
	font-family: 'Open Sans', sans-serif;
}

Sample markup:

<h1>Hey, I'm Lato font</h1>

<div class="gf-opensans">This text will use Open Sans font from Google Fonts.</div>

<div>This text will use default font specified in your theme.</div>

<p>An Open Sans Paragraph!!</p>

You’re Ready to Add Google Fonts

So you see it’s not as hard as it sounds to add Google fonts to WordPress website. First, obtain an URL consisting links to 2-3 Google fonts and add the URL using either way specified. Then you’re ready to change fonts of text elements using CSS rules with chosen fonts.

Similarly to Google fonts, Typekit fonts are also a highly popular choice for typography. The Boo theme by ThemeRella has inbuilt integration of 2500+ Typekit fonts and 700+ Google fonts. So you can implement them on your Boo powered website instantly rather than setting up through code first.

If you liked this article, then please subscribe to our newsletter as well as don’t forget to share the post. Any additional thought or question regarding adding Google fonts? Just mention in the comment section.

Opinions

  1. Post comment

    Здравствуйте! I must have missed something because I don t see how to add font x from google fonts to my theme. Not very easy at all.

    Permalink

Join the Discussion

Return to top of page