How to Add Google Web Fonts in WordPress Themes the “Right” way

Adding Google Web Fonts in WordPress Themes

We have mostly seen folks using the first two methods.
The easiest 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:

@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. 
Here is how you would do it:
 
@import url(http://fonts.googleapis.com/css?family=Lora|Oswald);
 
This method is super easy but it is not the best way add Google fonts to
your WordPress site. Using @import method blocks parallel downloads, 
which means the browser will wait for the imported file to finish 
downloading before it starts downloading the rest of the content. 

If you MUST use @import, then at least combine multiple requests into one. 
 
You will most likely have to edit your header.php file, and paste the following 
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">

Properly Enqueuing Google Fonts in WordPress

Another way to add Google fonts to your WordPress site is by enqueuing the font in your theme’s functions.php file

function add_google_fonts() {


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

}



add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

Comments

Popular posts from this blog

How to install and configure Alphabetic Pagination WordPress Plugin?

How to check if it is WooCommerce page?