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.
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.
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.
//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 Nunitoh1{font-family:'Nunito', sans-serif;}
Likewise, you can change font anywhere on your website just by mentioning the section followed by the Font family.
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.
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.
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.
