Description:

If you are bored to use normal fonts, you can follow this step-by-step guide to use brand new Google WebFonts on your wordpress’s blog. Tutorial strarts from the Quick use of fonts on google platform and will drive you until the real utilization on your blog.

The Code:

You can load fonts in two ways, but, the last part of the tutorial is common for both methods. The first things you need to do, is choose the webfonts you want to use in google fonts directory

1. Load fonts on your blog

Let’s start to see how to load fonts on your blog, before we start to use that on your theme; In the first method you will load the javascript as style.css file; applying an action in the header of the theme; in the seconds, you’ll load font directly in your style.css file.

1.1 Add action in the header:

After you have been choose the font you want to use on your blog, click on “Quick Use” at right-bottom of the page, and you will see a box like the following:

Now, add the following function in your function.php theme’s file:

function wpc_google_font() {
echo "<link href='http://fonts.googleapis.com/css?family=Karla' rel='stylesheet' type='text/css'>";
}
add_action ('wp_head', 'wpc_google_font');

You have loaded the font in your header; you can skip now to point number 2.

1.2 Import Font in your style.css file:

With the Second method you can import font directly in your style file; and you just need to switch the previus box to “@import”, such as the following image:

Open now the “style.css” file of your theme, and add the following code after general info lines, such as the first line of style:

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

This would be the results:

2. Load brand new font in your style.css body:

Finally in your style.css file you just need to load the brand new font; to do this, look for “body” class and add the following code:

font-family: 'Karla', sans-serif;

this would be the results:

/* General Structure and Styles
--------------------------------------------- */
body {
	background-color:#ececec;
	font-family: 'Karla', sans-serif;
	color: #777;
}
#page {
	max-width: 1102px;

That’s all