Google Fonts is one of the largest libraries on the internet that has tons of free and open-source font families. It is the most commonly used font library by web designers and app developers as they are free and lightweight. Fonts are one of the most important factors that define your website, so it is important to have the perfect font combination to make your website look more professional. WordPress users can make use of the Google Web Fonts in your WordPress website to optimize the website for better performance and speed. If you are new to WordPress, check out our detailed guide on how to use Google web fonts in your WordPress website in all possible ways.

Steps to Use Google Web Fonts on WordPress

There are two possible ways to get Google fonts on your WordPress website and they are

  • With Plugin
  • Without Plugin

Use Google Fonts on WordPress with Plugin

WordPress has exclusive plugin features with which you can access many features on your WordPress website with some simple clicks. Here is how you can access Google Fonts on WordPress with the plugin.

[1] Go to your WordPress dashboard and choose Plugin from the left panel.

[2] Click on Add New and search for Easy Google Fonts in the search bar.

[3] Click on Install Now to begin the installation of Easy Google Fonts.

Easy Google Fonts - google fonts on wordpress

[4] Once installed, click on Activate to activate the plugin on your website.

[5] Now go to the Appearance section and choose Customize option.

[6] Here click on the Typography section from the left panel.

Typography - google fonts on wordpress

[7] Choose separate fonts for Paragraph, Heading 1, Heading 2, Heading 3, Heading 4, etc.

Edit font - google fonts on wordpress

[8] You can also edit the font appearance like Font weight/Style, Text decoration, and text transform.

Font weight - google fonts on wordpress

[9] Once you make all the changes, click on Publish to apply changes.

[10] Now you have successfully added Google Fonts to your WordPress website.

Apart from the Easy Google Fonts plugin, there are various other plugins that have access to Google Fonts like

  • Fonts Plugin | Google Fonts Typography
  • OMGF
  • Autoptimize, and many more

Related guide: How to Add Load More Posts Button in WordPress

Use Google Fonts on WordPress without Plugin (Manually)

Even without the help of the plugin, you can still able to access Google Fonts in WordPress manually using minimal code. Here are the four possible ways to add or embed Google Font in WordPress.

  • Add Google Fonts in WordPress Themes using @import function
  • Add Google Fonts in WordPress using Font URL
  • Embed Google Fonts in WordPress website using wp_enqueue_style() function
  • Load Google Fonts Using JavaScript

Before you jump on to embedding Google Fonts on WordPress, you need to know how to get the font URL/code

[1] Go to https://fonts.google.com from your browser.

[2] Here choose any of the font families you like.

Choose Google Fonts

[3] Under the Styles section, you see various font styles.

Font Styles

[4] You can select any particular style by clicking + Select the style next to the styles you like.

Select this style

[5] Click on the View Selected Family icon next to the Download Family button on the top right corner.

View Selected Family

[6] Here you can find the <Link>, @import, and CSS code.

[7] Copy the one you need and use it on your WordPress website.

Add Google Fonts in WordPress Themes using @import function

Go to Appearance >> Customize from your WordPress dashboard. Choose the Additional CSS section and add the following line of code.

Additional CSS - google fonts on wordpress
//Code to import font family Nunito and Ubuntu
@import url(https://fonts.googleapis.com/css?family=Nunito);
@import url(https://fonts.googleapis.com/css?family=Ubuntu);

The above code to import two font families can be written in a single line by using Vertical or upright slash symbol (|) or Ampersand (&) family=.

@import url(https://fonts.googleapis.com/css?family=Nunito|Ubuntu);

Once the code is added, click on Publish to apply it on your website.

Add Google Fonts in WordPress using Font URL

Instead of using import, you can add the fonts to your WordPress website using its URL. This method is faster and effective than the previous one. First, go to Theme editor or cPanel of your WordPress website and open the header.php file. Add the following code above your main stylesheet.

//replace the font URL with your own
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Nunito|Ubuntu" media="screen">

If you can’t find the header file or find this method difficult try using Insert Header and Footer plugin. In this plugin, add the above script under the Scripts in the Header section.

Once the following line of code is added to your header file, go to your Theme customization section and click on Additional CSS and edit the font on the section you need by using a simple CSS code.

//Change All Heading 1 font to Nunito
h1{    
font-family: 'Nunito', sans-serif;
}

Likewise, you can change font anywhere on your website just by mentioning the section followed by the Font family.

Additional CSS - google fonts on wordpress

Embed Google Fonts in WordPress website using wp_enqueue_style() function

Enqueuing is another way of adding new fonts or scripts to your WordPress website. To add an enqueue style, go to Theme editor or cPanel of your WordPress website and open the functions.php file. Enter the following line of code.

<?php
function wpb_add_google_fonts() 
{
wp_enqueue_style( 'wpb-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
add_action( 'wp_enqueue_scripts', 'wpb_add_google_fonts' );
?>

Note: Make sure to change the font URL to the one you wish for.

If you have no idea where to added the code in the PHP file, then try using the Code Snippet plugin to make the process simpler and quicker.

Code Snippets

Best Google Fonts for Blogging or Any Website

Here are some of the Fonts that can be used on your website for a modern and professional look

  • Roboto
  • Montserrat
  • Playfair Display
  • Archivo
  • Lora
  • Oswald
  • Raleway
  • Nunito
  • Ubuntu
  • Mukta
  • Amiri, etc.

Here is a tip to find the font combination that suits your heading or any fonts you use on the website.

[1] Go to Google Fonts official website.

[2] Choose any font you wish for.

[3] Tap on the Pairing section.

Font pairings - google fonts on wordpress

[4]This will provide the Popular pairings with the selected font.

Related guide: How to Add & Style Jump Menu in WordPress Admin Dashboard

Conclusion

These are some of the possible ways to use Google Fonts on a WordPress website. As we are sending an external HTTP request to access, Google Font may slow down your website. This can be fixed by using DNS prefetching where you can add the external HTTP URLs that reduce the time on external requests and fasten your website speed. Hope this guide helped you add google font on your WordPress website. If you have any queries let us know in the comments section below.

Would you like to receive notifications on latest updates? No Yes