How to Use Free Google Web Fonts

By Updated   BloggingGoogleTutorials

Google Web Fonts is the best way to add amazing new free fonts to your site. Google web fonts are similar to web safe fonts, which can be added to any site by adding a few simple lines of code to your html.

Enthused by the new font technology and with the intention to improve our web design fonts,  we tested out the Google web fonts. And it was much easier than I thought and was compatible with most web browsers.

Free Google Web Fonts

I decided to change the fonts of post titles on our front page and single pages. So we browsed across Google Web Fonts gallery and decided to chose Droid Serif, which incidently was the most popular serif font in the font directory (You can sort fonts by various filters).

google fonts

So I clicked on the Droid Serif font and decided to “Use the Font” and they gave me the code to use. This is the code to add to the head tags.
<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>

And this is how to modify the font family tag in CSS stylesheet. (Note the fall back font is Arial or any other serif font just in case the browser is unable to render the new Google web font.)
h1 { font-family: 'Droid Serif', arial, serif; }

So I just inserted the code between the <head> tags and modified the CSS and you can see the new font live on the title of this post and all title posts on the main page (as we added it to h2, h3, h4 tags also).

Try Google web fonts, as there are some really amazing web fonts out there and amaze your readers. You can add as many free web fonts as you like. Which is your favorite Google web font?

14 comments on “How to Use Free Google Web Fonts

  1. Julian says:

    great job for Google
    after developing on JS and Jquery, now it starts serving CSS API :-)

  2. QuickOnlineTips says:

    The font family needs to be edited in the CSS stylesheet or it will not work. Both the fonts in the head tags and CSS should match.

  3. yoxx says:

    thank you… i love these fonts

  4. SCube says:

    Wow thankssss looking good

  5. Jasmine says:

    This is lovely. I love these cool fonts. Will check and use it on my blog as well! :)

  6. Google Fonts says:

    Well, Googlefonts.com was available so I naturally had to buy it. Once I purchased the domain name I figured I would put it to good use and made this 1-2-3 tutorial on how to use google fonts!

  7. web hosting says:

    Interesting but does that allow international language font to use with it ?

  8. Tech Crates says:

    Excellent thing done by the search giant

  9. LadyMarianFL says:

    I am running Windows 7 Premium on my HP6910 laptop. My browsers are Firefox 3.6 and Internet Explorer 7. If I view the font families webpage using Firefox, every single font-family displays the exact same default font! If I go to the webpage using Internet Explorer, I get a blank page.

    Am I missing a plug-in or something? Any suggestions on how to resolve the issues with either or both browsers?

    TIA!

    • LadyMarianFL says:

      Well, the very next forum that I went to had the answer for the Firefox issue! I went to Tools>Options, then selected the Content tab in the popup dialog. In the Fonts & Colors section, I clicked the Advanced button. On the Fonts dialog box, I checked the Allow pages to choose their own fonts… checkbox. After closing the dialog box, I navigated to the Google web font-family page and it’s now displaying the appropriate font for each entry! Posting this for anyone else with the same problem who might end up on this site.

  10. khushboo says:

    sir ,
    I want to print our hand written notes in computer font .Is it possible ?& how?……

Leave a Reply

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



 
css.php