The 10 Best Script and Handwritten Google Web Fonts

by on 18th June 2012 with 15 Comments

screenshot

A good script is hard to find. I’m extremely picky when it comes to this particular area of typefaces and tend to hate most of what I see. With this post, you can skip the work of sorting through the crap and cut straight to the awesome scripts that are readable, attractive and perfect for your site.

All of the fonts are shown with a unique CSS treatment and provided with code for your instant implementation. They’re also all served up with Google Web Fonts so you’ll be up and running with a quick copy and paste, no downloads required!

Oleo Script

A nice thick script with good readability and interesting letter shapes. Perfect for headlines.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.3 'Oleo Script', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

Lobster Two

Lobster needs no introduction, it has become one of the most ubiquitous scripts on the planet in the last few years. Version two gives you the choice between bold and thin versions.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.3 'Lobster Two', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}

Berkshire Swash

I really love the ornamental nature of this typeface, the letters are big, bold and beautifully curvy. Use this if you want to convey an old world feel.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.3 'Berkshire Swash', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 1px 1px 0px #ededed, 4px 4px 0px rgba(0,0,0,0.15);
}

Merienda One

Merienda isn’t my favorite but it certainly has its uses. The letters have a brushed feeling with sharp directionality that conveys motion well.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.2 'Merienda One', Helvetica, sans-serif;
  color: rgba(0,0,0,0.7);
  text-shadow: 3px 3px 3px #fff;
}

Pacifico

Pacifico is just a great, round and loopy script that really has a unique feel to it. It’s hard to find a thick script with such nice curves and so much character so be sure to bookmark this one.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.5 'Pacifico', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
}

Just Another Hand

If you’re looking for something that looks truly handwritten, Just Another Hand is a good choice. To throw a visual curve ball, I used shadows to give it a 3D effect, but it looks great (or even better) even without them.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.0 'Just Another Hand', Helvetica, sans-serif;
  color: #969595;
  text-shadow: 0px 3px 0px #5e5e5e, 0px 5px 0px #4d4d4d, 0px 7px 0px #3c3c3c, 0px 9px 0px #2b2b2b, 3px 8px 15px rgba(0,0,0,0.1), 3px 8px 5px rgba(0,0,0,0.3);
}

Arizonia

Arizonia has an awesome flowing feel with wide arcs and smooth strokes. It’s a great logo typeface and really doesn’t feel like something you’d expect to be available as a live web font.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.3 'Arizonia', Helvetica, sans-serif;
  color: #2b2b2b;
  text-shadow: 4px 4px 0px rgba(0,0,0,0.1); 
}

Cookie

Cookie has a sort of feminine fairy tale charm that makes it a great font for story headlines and the like. The next time you need a whimsical feel, you should try it out.

screenshot

HTML


CSS

h2 {
  font: 400 130px/0.8 'Cookie', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}

Great Vibes

Great Vibes is a very ornate script like Arizonia, but a little more thin and sophisticated. The letter forms are really beautiful and are sure to attract attention.

screenshot

HTML


CSS

h2 {
  font: 400 130px/0.8 'Great Vibes', Helvetica, sans-serif;
  color: #fff;
  text-shadow: 4px 4px 3px rgba(0,0,0,0.1); 
}

Leckerli One

Leckerli One is fat and utilitarian. It’s fairly masculine as far as scripts go and perfect for big, bold statements.

screenshot

HTML


CSS

h2 {
  font: 400 100px/1.2 'Leckerli One', Helvetica, sans-serif;
  color: #000;
  text-shadow: 2px 2px 0px rgba(0,0,0,0.2), 4px 4px 8px rgba(0,0,0,0.2); 
}

Which Is Your Favorite?

There you have it, ten awesome scripts and hand written fonts served up and ready to implement. The Google Web Font library has well over a hundred of these but so many of them really aren’t worth using at all so hopefully this article will help you thin out the herd.

Which of the fonts above is your favorite? Have you used any of them in live examples? We want to see!

Other Posts in Google Font Combinations:

Comments & Discussion

15 Comments

Comments & Discussion

15 Comments

  1. TheAL says:

    I’m glad to see that a variant of Lobster made the list. A lot of people are somewhat hesitant to continue feature it, mainly due to it being branded the new Comic-Sans. Personally, I like it. When not abused, Lobster is a very nice font.

  2. Deepak Jose says:

    Pacifico, Leckerli One, Oleo Script & Lobster two are awesome one that I like a lot.

  3. Paul says:

    The CSS for great vibes is coded for “Cookie”

  4. Jason says:

    I love Great Vibes. I use on my Tumblr site. Lovely!

  5. Albert says:

    Y no se pueden descargar las fuentes?

  6. Chris Devlin says:

    I like “Berkshire Swash” because of the classical & clear font style. I am gonna use this for my blog…. :)

  7. Zout erover says:

    Cookie. Especially now, when the new cookie law in the EU is trending topic.

  8. Nice collection! I love using Google Web Fonts, especially if it’s a nice script font. Thanks for sharing! :)

  9. Stephanie says:

    I am trying to use Lobster on a website..it works in Google Chrome, but it isn’t working in IE.. can you help?

  10. Nathaniel says:

    Thanks for the good lineup.

  11. Thanks for the share buddy.. nice picks..

  12. noonph says:

    drop shadow?
    seriously?

  13. Just Another Hand is my favorite.. Take a look at my web site. It looks gorgeous. Thank for sharing.

Leave a Comment

Subscribe
Membership
About the Author