How to use Google web fonts in a website or a blog?

Till I found Google web fonts, I believed that serif fonts are not suitable for web designing because sans-serif like Arial and Verdana have more readability than serif fonts. With the arrival of Google web fonts, there is a tremendous change in creating web pages. Most of the professional bloggers have started to use Google fonts.

Web designers and bloggers should pay much attention on fonts while designing their web pages. You can’t attract the readers unless you use right fonts in right size. Fonts gives neatness to your pages. In my opinion, Google fonts are prettier than our usual fonts.

In this post let me explain how to use Google web fonts in our websites or blogs.

Why do we need to choose Google fonts?

Most of my friends ask me why we go for Google web fonts. The answer is simple. Google has many stylish fonts to use in web and moreover they are free of charge. While I am writing this article, Google has introduced more than 600 web fonts in its showcase. All you have to do is to add a few snippets of HTML code to your page.

How to get Google fonts?

Simply type 'fonts' after google.com/, www.google.com/fonts, it will take you to the showcase.

Google offers you many options to choose fonts. The right panels help to filter what sort of fonts you need. All the fonts in the showcase were divided into four major categories: Serif, Sans serif, display and handwriting. Another 3 options assist you to find fonts when adjusting the handles of three attributes Thickness, Slant and Width.
You can also preview the fonts as words, sentence, paragraph or poster before choosing it.

After choosing your font, click the Quick-use button to get the code.

Scroll down until you find “Add this code to your website”. Google offers you three options to use the code in your website such as Standard, @Import and Javascript. I think it is the best way to go for standard option which is widely use by designers.

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

After crabbing the code, open your page in design mode (in blogger Template > Edit HTML) place the code after title tag <title></title> probably it should be above the <b:skin> tag.

Now time for integrate the fonts into CSS. For example if you want to use it for paragraphs, the CSS code would be:

P { font-family:'Lora',serif;}

Now check your page with your browser and enjoy!