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.

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

And Thats It!

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

, ,