18 Custom Web Safe Fonts From Google

Are you sick of using the same old fonts for your websites? Well as technology of the web advances we are now able to add other custom fonts to our web library now. Google offers a free service of offering an additional 18 web safe fonts that can be embedded into your site within two lines of code, nifty huh? Adding a custom font is easy: just add a special stylesheet link to your web page, then use the font in a CSS style. All fonts are open source high quality type faces that are cross browser accessible.

I love how easy Google has made it to implement these additional fonts, i’ll explain below.

Link Stylesheet

Here you have to link the stylesheet which links to Google’s fonts on your HTML document.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">

Adding a Style

You need to define a selector with the font to activate it.

body    {
      font-family: 'Font Name', serif;
}

Here’s Their Example

Below is how they linked the stylesheet, defined the font in body, and wrote something inside the body using an h1 style.

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

And Thats It!

How easy was that? Now you have an additional 18 fonts you can use on your web site, Thank you Google.

, ,



Jun

20

5 Comments made, post one now! We love comments.

  1. monica a.
    July 12th, 2010
    11:02 am

    Great! i didn’t know about Google’s free fonts, good to know.

  2. Justin Mathew
    July 12th, 2010
    1:58 pm

    No problem! Glad you enjoyed and learned something new from us! Keep checking back for more updates.

    -Justin

  3. John
    August 18th, 2010
    1:36 pm

    Was just checking this out on google other day. Like the look of it, hope they add more fonts though :) .

  4. CSS Coder
    September 24th, 2010
    7:21 am

    WOW! Nice to know that more fonts are available there for our use. Thanks to Google and thanks to you too for sharing this useful information. Good work.

  5. Shivaami
    October 2nd, 2010
    1:50 am

    Great! i didn’t have any idea Google’s free fonts, good to know