Installing and Finding Google Web fonts for your web pages

Each and every web page designer must have these three things in the mind.

  1.   Design(Web Layout)
  2.  Color combinations
  3.  Usage of good fonts

Out of the three, Fonts are going to play an important role in deciding the appearance of a web page. Good usage of fonts helps visitors to stay for a longer period of time which in turn gives more sales, creditability, etc., to the website.

Those days a web designer can only use a few set of common default fonts like Arial, Verdana, Sans-serif, TimesNewRoman. Those days you will convert a stylish font into an image in Photo editing software like Photoshop to make the title look beautiful and attractive in  your web page.

However,  things have changed drastically. Now, Google has introduced a new methodology where you can use any type of fonts on your web page that will appear as same on all the computers. The website address: http://www.google.com/webfonts . With the help of Google Web fonts you can attract anyone with great fonts use them in your title or where you feel it is important.

Embedding Google Fonts into your webpages

Step 1:

Go to www.google.com/webfonts and select your favorite font, there are many fonts and filter criteria such as thickness, width and slant of the font. You select any one of these and find a suitable font for your website/ web page.

 Step 2:

Once you have selected the font you can either add it to your collection or click for quick usage. You will get three options

  • Standard
  • @import
  • Javascript

Step 3

Using the fonts on your webpage is very simple copy the code of your choice.

Standard: This is mostly used for using the fonts on a single web page, put this code on the head section where you place the code of your style sheet, and you need to call the name of the font in your styles. Something for example ( font-family: ‘Oswal Rice’, cursive;)

  1. @import: This way of importing helps you to use the font throughout the website.
  2. Javascript: This is another option where you can embed the code on a single webpage or create a JavaScript file and name it as fonts.js and paste the code without the script tag.

Finding the Best Google Web Fonts using a trick in Google Search.

This is a trick. I have personally tried to see the fonts and its style in action on various websites. I use this query (intext:http://fonts.googleapis.com/) on the Google Search box to find new stylish and professional fonts for creating professional fonts for my website.

You can see a huge list of websites using the code. You get to see the real time preview of the fonts, and also you get many clues like, for Example (you will know which size should be given for a particular font to look attractive.

You can try various combinations like this to find new Google Web font styles and use it in your web page to attract your visitors.