Google Web Fonts provide you a free way to use web safe and stylish fonts on your website – without paying money for it’s usage license! With Google Web Fonts, you can use more fonts in your website other than Arial, Verdana etc. without even uploading the font to your server.

As we all know, readability of a website depends on the goodness of it’s design and appearance. Fonts play the most important part in Web design, and it really matters what font you are using in your website. For example, Arial / Helvetica (sans-serif), Verdana and Georgia are the commonly used fonts for web design. These fonts provide a good readability, but if you go for a newer font, you need to do experiments and ask people about it’s appearance. So, you should pay attention while selecting a new font for your website.

Two important tip you must read before implementing Google Web Fonts on your site:

  1. Using many font styles can slow down your webpage, so only select the font styles that you actually need on your webpage.
  2. If you choose only the languages that you need, you’ll help prevent slowness on your webpage.

Google Web Fonts showcase a variety of web-safe Fonts with different categories like Serif, Sans-Serif, Display and Handwriting. You can also browse the fonts according to certain attributes like script, width, slanting and Thickness. All these attributes can be controlled in the left-hand side pane.

You can also preview fonts as a Word, Sentence and Paragraph before making a selection. Here is a short guide which explains how to use Google Web Fonts in your website or blog, either it runs on WordPress, Blogger, Tumblr, MovableType or on some other custom build platform:

  • Point your browser to Google Web Fonts and choose a font by clicking “Add to collection” button on the right side. I selected Alike font and using it as an example here.

    how to use google fonts with wordpress

  • The bar at the bottom will show a message like “1 font family in your collection” with three options “Choose“, “Review” and “Use“. Just click on “Use“.

    using google fonts on blogger

  • It will ask to verify your Font settings. Choose the available styles (eg. bold, italic etc. if available separately with your font). Next to that, choose the specific language character set (optional, but cut downs the total font load time).
  • Now comes the code part. There are three way available to implement the code part, Standard (external stylesheet), @import method and the JavaScript method. You may use any one of these three, but I’ll recommend you to implement the Standard method.

    Copy the code you get in Step 3, and put it just before the </head> in your website and save the code.

    using google web fonts in your website

  • Now, add the font name in your CSS file. For example, you want the paragraph (<p>) element to be displayed with your selected Google font, then the styling in the CSS file will be something like this:
    p {
  font-family: 'Alike', Arial;
}

    This code will show the paragraphs in your website with your new Google font, and if the font encounters some temporary problem to load up, then it will show paragraphs in Arial font. Similarly, you can add the font-style to other elements like headlines, lists, links also. If you’re not much familiar with CSS, you should learn CSS basics at HTML Dog.

You can also use multiple fonts by simply adding them to your collection, clicking “Use” button and grabbing the code for all the fonts in your collection. Rest of the method is same as above.

This is a working demonstration of Google Web Fonts (Font: Alike).

If you’re looking for an in-depth explanation of Web fonts (not Google Web Fonts) using CSS, you must read this article covering Web Fonts usage in CSS3. So, will you be implementing Google Web Fonts on your site?