3 Simple Methods to Add Google Web Fonts in WordPress Themes

3 Simple Methods to Add Google Web Fonts in WordPress Themes

Are you willing to know the 3 simple methods to add Google Web Fonts in WordPress Themes so your site can load fast? One of the easiest changes you can make to your blog is to change the default fonts that come with your theme.

For quite a few years now, Google has been an awesome resource for free fonts that are easy to implement on your own site. Google fonts are an excellent free resource for web designers.

Read More: How to simply Add Google AdSense to Your WordPress Website?

Search for the Google Web Fonts that You Like

  • Firstly find a Google font that you like. Then move to Google fonts and browse via the library. If you find the font that you like the tap on the Quick-use button.

quick use fonts

  • After clicking on the quick-use button, you will be taken to a new page. Scroll down until you see the usage instruction box with a code that you can add to your website.

font embed code

  • Here you will see that there are three different tabs for adding the font to your site. The first one is the standard and suggested a method to add Google fonts to your site. The second tab uses the @import CSS method, and the last tab makes use of the JavaScript method.

Just have a look at each of these methods.

Methods for adding Google Web Fonts in WordPress Themes

For adding Google Web Fonts in WordPress Themes the simplest way would be to open your theme’s style.css file and paste the fonts code that you got in the @import tab like this shown below:-

@import url(http://fonts.googleapis.com/css?family=Lora);
@import url(http://fonts.googleapis.com/css?family=Oswald); 

You can also combine multiple font requests into one. Just have a look below:-

@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);

This method is very easy. Using @import method blocks parallel downloads. It means the browser will wait for the imported file to finish downloading before it starts downloading the rest of the content.

Method 1: Performance Optimized Method of Adding Google Web Fonts

For adding Google fonts use the Standard method which utilizes the link method instead of the import method. From step 1 take the font URL that you got. In case you are adding multiple fonts, then you can combine the two fonts with a | character. Place the code in your theme’s head section.

Edit your header.php file, and paste the below-given code above your main stylesheet. The example would look like this:

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Lora|Oswald” media=”screen”>
<link rel=”stylesheet” type=”text/css” href=”YOUR THEME STYLESHEET” media=”screen”>

Generally, the main goal is to put the font request as early as possible. As per to the Google Web Fonts blog, if there is a script tag before the @font-face declaration, then Internet Explorer won’t deliver anything on the page until the font file is done downloading.

After you have done this simply start using it in your theme’s CSS file like this:

h1 {
   font-family: ‘Oswald’, Helvetica, Arial, serif;
}

There are plenty of theme frameworks and child themes out there. And it is not suggested to modify your parent theme’s files particularly if you are using a theme framework because your changes will be overridden the next time you update that framework. Just utilize the hooks and filters presented to you by that parent theme or framework for adding Google fonts correctly in your child themes.

Method 2: Properly Enqueuing Google Fonts in WordPress

The other way of adding Google fonts to your WordPress site is by enqueuing the font in your theme’s functions.php file or a site-specific plugin.

function wpb_add_google_fonts() {

wp_enqueue_style( ‘wpb-google-fonts’, ‘http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300’, false );
}

add_action( ‘wp_enqueue_scripts’, ‘wpb_add_google_fonts’ ); 

At last, replace the font link with your own.

Method 3: Loading Google Fonts Using JavaScript

If you want to use this method then copy the code in the JavaScript tab in Google fonts usage instructions section. You can also paste this code in your theme or child theme’s header.php file instantly after the <head> tag.

That’s all on our behalf and we hope that you liked this blog completely.

If you need any kind of help specifically related to WordPress Security, you can always dial our WordPress technical number+1 844 897 0441. The door to our WordPress customer service is always open for you.

Some of our Other Blogs:



Leave a Reply