Have you ever wondered how to add Google fonts to WordPress without using a plugin? It’s surprisingly easy, relatively fast and only takes a few steps to complete. With this step by step guide I’ll show you how to select

a font, then how to add it to your WordPress website and then how to use it in the styling. So let’s get started on how to add Google fonts to WordPress.

Part1

Step1.

For the first step you’ll want to select a font or fonts to use from Google fonts. You can browse their selection here.

Step 2

You can see a larger specimen of the fonts that you like by hovering over one and clicking on either the title or “see specimen.” Once you’ve opened the font you move to the next step.

Step 3

Once you’ve found the font and you like the way it looks click on +SELECT THIS FONT at the top right of the screen. Once you click on that link a little black bar will appear at the bottom of the page.

Step 4

Now that you’ve clicked on that bar you’ll get the details that you need to use in your theme. Now to deploy the font correctly.

Part 2

Method 1

Method one is the most correct way to use Google Fonts in WordPress, but method 2 will also work. Method one is slightly more technical.

Step 1

Enter the following code into your theme functions file replacing the link with your chosen font

/*
 ** Snippet add google fonts links to head and to WordPress
 ** Author John Cook
 ** https://wcsuccessacademy.com/?p457
 ** Tested with WooCommerce 3.3.3
 */
 add_action('wp_head', 'google_fonts_in_head');
 function google_fonts_in_head(){

?>
/*--add more fonts here if you like- delete this line if you also want to--*/
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Skranji&display=swap" rel="stylesheet">
<?php

}

Step 2

Once you have entered the code snippet into your theme functions file head to your custom CSS. You can add your custom CSS into your child theme CSS file, the custom CSS section in the theme customizer if your theme has one, or a custom CSS plugin.

To use it simply pick the selector you need to add CSS to and use it in the font-family. To find the correct selector open a page on your website, hover the element you need to edit, right click and select inspect element. If done correctly the element should be selected and the element easily available to copy. Common selectors are h1, h2, h3, p.

 h1 {
   font-family: 'Skranji', cursive;
 }

Once saved simply flush your cache and the results should be visible on the front end.
The benefit of method 1 is that you can also add other content to the head, such as preload external scripts and so on. This is a very handy piece of code to have.

Method 2

If you aren’t exactly comfortable entering code into your theme functions.php file you can call the font through the CSS file. This method isn’t supported on all browsers and should be your second choice. This method allows you to use @font-face for Google Fonts in your WordPress website.

Step 1

Go back to the google font page and highlight the URL in the link tag and open the link in a new browser tab.

Step 2

When it opens you should get a page with code in it. Simply copy the code to your CSS file. Once pasted in do as above and call the font into the CSS selector you want to use it in.

/*
 ** Snippet how add google fonts to WordPress usaing @font-face
 ** Author John Cook
 ** https://wcsuccessacademy.com/?p457
 ** Tested with WooCommerce 3.3.3
 */
 /* latin-ext */
 @font-face {
   font-family: 'Skranji';
   font-style: normal;
   font-weight: 400;
   src: local('Skranji'), url(https://fonts.gstatic.com/s/skranji/v5/OZpDg_dtriVFNerMUzKkk2Tm.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
   font-family: 'Skranji';
   font-style: normal;
   font-weight: 400;
   src: local('Skranji'), url(https://fonts.gstatic.com/s/skranji/v5/OZpDg_dtriVFNerMUzykkw.woff2) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 /* -- Then use normal css to call the font of your liking to the elements you like--*/
 h1 {
   font-family: 'Skranji', cursive;
 }

Did this work for you? Let me know in the comments below with the font you selected.

John Cook

I have been working with WordPress and WooCommerce since 2012 and have developed a deep knowledge of the content management system. Since 2012, I have developed several plugins and designed dozens of websites utilising different frameworks, CMS’s and programming languages.

On a professional level, I’m currently undertaking PhD studies investigating IoT cybersecurity. I recently graduated with First Class Honours and Masters of Information Technology, receiving the Executive Dean’s Award for studies undertaken in the 2021 and 2022 academic years. I have worked in the information technology industry for the past 11 years primarily as a software/web developer specific to design, optimisation, network management and security. My research interests are in the areas of Internet of Things (IoT), 5G and Beyond Networks and information security for wireless networks and software development.

Google Scholar ID: https://scholar.google.com.au/citations?user=0KvpwNEAAAAJ&hl=en

ORCID: https://orcid.org/0000-0001-8113-1296