Black God

How to use Google Web Font for your own web site

Today Google has announced Open Source Web Fonts. It is a collection fonts which we can use in our web sites at free of cost. Google hosts the fonts. Here is how to use these fonts in your own site to give better look and feel. This is one of the good way to get cheap font with professional look.

Note: You should have rights to edit your HTML pages of your site. In my case I have self hosted WordPress site, so I have all persmissions to edit it.

Step-1: Go to Google Font Directory site and select your favourite one.

Step-2: Now it will display the various specimens of this font, variants (bold, italic..), Character set and description. Click a tab named “Get the code”.


Step-3: Now you will be shown two pieces of code. The first one to include the font in your header and second one to use in CSS file for a section of text. Copy the first piece of code and paste it in <head> section of your page. In case of WordPress, it will be in header.php file of your theme. It is preferrable to have this code in earlier part of <head> to make it to load faster. This code will be some thing like this.

<link href=’http://fonts.googleapis.com/css?family=Droid+Sans‘ rel=’stylesheet’ type=’text/css’>

Step-4: Copy the second piece of code and paste it in your style sheet in appropriate section. In case of WordPress, it will be some thing like style.css file of your theme. Which ever content you want to show with new font, replace the font-family attribute with this new code. The font-family attribute look like this.

font-family: ‘Droid Sans‘, arial, serif;

You are done! Now your site should display new Google Web Font. Enjoy! This site’s name Black God is powered by Google web font using the above method.

3 comments for “How to use Google Web Font for your own web site

  1. October 31, 2011 at 12:06 am

    Good explanation. Google font may replace of Cufon. Because of slowness of Cufon and if Google font support Turkish charachters, may be I’d go on Google font. Thank you Author.

  2. Question
    December 25, 2010 at 4:02 am

    Some clients of mine are complaining that their site coded with Google Webfonts won’t print correctly. Now, I don’t print many web pages, but some of my clients do. Anyone else experienced this? Any ideas why?

  3. May 24, 2010 at 1:57 am

    Hi,

    I wanted to let you know that I wrote a little plugin that makes it easy to use Google Web Fonts from within the WordPress admin panel.

    I hope you like it – http://easywebcoder.com/wordpress-plugins/google-web-fonts/

    I welcome any feedback.

    Jeff Sebring

Leave a Reply

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