Monday , 24 July 2017
Home » Google » Make your blog more stylish with Google web Fonts : Add google fonts manually to your WP blog

Make your blog more stylish with Google web Fonts : Add google fonts manually to your WP blog

Google has recently launched a new open source font project called Google web fonts.  It’s a collection of some stylish web fonts, which bloggers and web developers can use in-order to make their website/blog more stylish and attractive. Only a  blog with an eye-grabbing design will stay on the heart of the reader for a long time ! Design is a big factor that influence the success of your blog. The Google fonts Directory will provide you some cool fonts that can beautify your blogs, which you can use instead of the old ‘standard’ fonts. The slogan of this service is ‘Making Web beautiful’ and I have added a demo of a google font called Tangerine below.

They can be integrated on any website and yes, with the best blogging platform – WordPress too. You can add the google web fonts to WordPress easily with plug-in or you add google web fonts to your wordpress blog by modifying your theme, manually.

How you can integrate google fonts with WordPress manually.

Step 1 : Back Up !

Back Up a Copy of your blog to your computer. This should be the first step while making any change (or adding anything) to your blog

Step 2 : Select the Font and copy the Meta Code

Go to Google Font directory and select a stylish font, which you want to use on your WP blog. There are only a few fonts available now, yet stylish. I hope that this number will rise soon, because you know it is from Google ! Click on the font you selected.

Now a new page will be loaded. It will shows some example texts off different sizes. You have to click on the ‘Get the Code’ Tab from it and copy the Code to your clipboard.

The code will be something like

<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>

This code may change in respect to the font that you have select. Anyway their common format is ;-

<link href='http://fonts.googleapis.com/css?family=fontname' rel='stylesheet' type='text/css'>

This is the meta code and you want to copy this code for proceeding with the rest of installation process.

Step 3 : Add the Meta Code to your WP blog

Add this META code to the WP admin >> Appearance  >>Editor >>header.php of your WordPress theme.

If you are using The Thesis theme, then you may want to add it in the Wp admin >> Thesis >> Site Options >> Document Head >> Additional script

After adding the code, save your theme. Now you have added the Meta code to your theme and it’s time to add the CSS code

Step 4 : Add the CSS code for the fonts

This is the most important and somewhat difficult part. You have to add the css code of where the font should appear. You can add this by editing the Stylesheet of your theme from WP admin >> Appearance >> Editor >>Style.css.

For example, if you want to change the font of h2, then you have to search the code h2 in your theme and add the Code

font-family: 'Your Google-Font Name';

Before the closing of H2 tag, i.e, It should look something like ;-

.h2 {
font-family: 'Your Google-Font Name';
}

You can edit the font for any field like this.

If you want to find the  CSS code of a particular area, then, open your blog in firefox/chrome browser, press Ctrl+U and you can get the source code of your blog. With this code you can easily study the CSS codes and their fields on your theme.

If you just want to add the special fonts to a particular field only, then add the text in betweeen the codes

<div style="font-family: 'FontName', serif;">

and

</div>

i.e, your test should be like this ;-

<div style="font-family: 'FontName', serif;">
Your text
 </div>

I think this tutorial was useful for you. So, hurry up and try Google fonts on your blog too. Be a part of this enthusiastic service 🙂

NB : You can add google fonts with the help of a Plug-in too but remember that plug-in could decrease your page speed load very much and that’s why everyone advice to decrease the use of plug-ins. It is recommended not to use plug-ins for simple things like this which can be done within 10 minutes :).

Also Read : http://www.allblogtools.com/tricks-and-hacks/how-to-use-google-custom-fonts-for-blogger/

About Rajeel

I'm Rajeel, a teen blogger from India who loves computers, sports, internet and all other kind of tech stuffs. This blog thing is one of my favourite hobby and the one that eats up much of my time. But Really, I'm loving it :) Find me in G+

6 comments

  1. Thank you Rajeel…

    Hey Guys, check this out;

    http://www.thetipslab.co.cc

  2. Wow its a cool thing 🙂 I tried these fonts and my article looks cool 😉

  3. Hi,

    Thanks for sharing, Definitely going to give a try.

  4. Nice great content keep it up 🙂

  5. Great info, but care must be exercised with new typefaces. I made that mistake before, and my website had to be completely redone because it ended up looking hideous.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top