Selecting a perfect font script for your design work or website might be a tricky job to do when you have numerous fonts to choose from. As most of the script fonts are fancy and rashly-written, your task of picking a font suitable for your project theme becomes more difficult.
Script and Handwritten fonts are in good use today, and designers are carving fun n’ fancy effects out of their designs using them. As Google Font library is the biggest source providing free web fonts with a big variety, we collected some best Handwritten and Script Web fonts from it to make your font selection task little bit easier.
Below list carries over 30 script & handwritten Google web font families from which may help you pick the perfect ones for your website or projects. The web font CSS is given along with the font to use it instantly on your website.
Sofia
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sofia" /> <h2>Testing "Sofia" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Sofia', Helvetica, Sans-serif;
color: #333;
}
Berkshire Swash
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Berkshire+Swash" /> <h2>Testing "Berkshire Swash" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Berkshire Swash', Helvetica, Sans-serif;
color: #333;
}
Delius Swash Caps
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Delius+Swash+Caps" /> <h2>Testing "Delius Swash Caps" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Delius Swash Caps', Helvetica, Sans-serif;
color: #333;
}
Petit Formal Script
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Petit+Formal+Script" /> <h2>Testing "Petit Formal Script" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Petit Formal Script', Helvetica, Sans-serif;
color: #333;
}
Leckerli One
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Leckerli+One" /> <h2>Testing "Leckerli One" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Leckerli One', Helvetica, Sans-serif;
color: #333;
}
Grand Hotel
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Grand+Hotel" /> <h2>Testing "Grand Hotel" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Grand Hotel', Helvetica, Sans-serif;
color: #333;
}
Norican
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Norican" /> <h2>Testing "Norican" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Norican', Helvetica, Sans-serif;
color: #333;
}
Rancho
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Rancho" /> <h2>Testing "Rancho" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Rancho', Helvetica, Sans-serif;
color: #333;
}
Merienda
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Merienda" /> <h2>Testing "Merienda" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Merienda', Helvetica, Sans-serif;
color: #333;
}
Courgette
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Courgette" /> <h2>Testing "Courgette" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Courgette', Helvetica, Sans-serif;
color: #333;
}
Italianno
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Italianno" /> <h2>Testing "Italianno" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Italianno', Helvetica, Sans-serif;
color: #333;
}
Alex Brush
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Alex+Brush" /> <h2>Testing "Alex Brush" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Alex Brush', Helvetica, Sans-serif;
color: #333;
}
Tangerine
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" /> <h2>Testing "Tangerine" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Tangerine', Helvetica, Sans-serif;
color: #333;
}
Qwigley
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Qwigley" /> <h2>Testing "Qwigley" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Qwigley', Helvetica, Sans-serif;
color: #333;
}
Shadows Into Light Two
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Shadows+Into+Light+Two" /> <h2>Testing "Shadows Into Light Two" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Shadows Into Light Two', Helvetica, Sans-serif;
color: #333;
}
Amatic SC
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Amatic+SC" /> <h2>Testing "Amatic SC" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Amatic SC', Helvetica, Sans-serif;
color: #333;
}
Handlee
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Handlee" /> <h2>Testing "Handlee" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Handlee', Helvetica, Sans-serif;
color: #333;
}
Sunshiney
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sunshiney" /> <h2>Testing "Sunshiney" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Sunshiney', Helvetica, Sans-serif;
color: #333;
}
Patrick Hand
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Patrick+Hand" /> <h2>Testing "Patrick Hand" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Patrick Hand', Helvetica, Sans-serif;
color: #333;
}
Just Another Hand
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Just+Another+Hand" /> <h2>Testing "Just Another Hand" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Just Another Hand', Helvetica, Sans-serif;
color: #333;
}
Sue Ellen Francisco
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sue+Ellen+Francisco" /> <h2>Testing "Sue Ellen Francisco" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Sue Ellen Francisco', Helvetica, Sans-serif;
color: #333;
}
Walter Turncoat
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Walter+Turncoat" /> <h2>Testing "Walter Turncoat" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Walter Turncoat', Helvetica, Sans-serif;
color: #333;
}
Bad Script
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bad+Script" /> <h2>Testing "Bad Script" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Bad Script', Helvetica, Sans-serif;
color: #333;
}
Crafty Girls
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Crafty+Girls" /> <h2>Testing "Crafty Girls" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Crafty Girls', Helvetica, Sans-serif;
color: #333;
}
Gochi Hand
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Gochi+Hand" /> <h2>Testing "Gochi Hand" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Gochi+Hand', Helvetica, Sans-serif;
color: #333;
}
Clicker Script
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Clicker+Script" /> <h2>Testing "Clicker Script" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Clicker Script', Helvetica, Sans-serif;
color: #333;
}
Sacramento
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Sacramento" /> <h2>Testing "Sacramento" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Sacramento', Helvetica, Sans-serif;
color: #333;
}
Euphoria Script
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Euphoria+Script" /> <h2>Testing "Euphoria Script" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Euphoria Script', Helvetica, Sans-serif;
color: #333;
}
Pacifico
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Pacifico" /> <h2>Testing "Pacifico" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Pacifico', Helvetica, Sans-serif;
color: #333;
}
Montez
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Montez" /> <h2>Testing "Montez" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Montez', Helvetica, Sans-serif;
color: #333;
}
Bilbo
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Bilbo" /> <h2>Testing "Bilbo" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Bilbo', Helvetica, Sans-serif;
color: #333;
}
Marck Script
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Marck+Script" /> <h2>Testing "Marck Script" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Marck Script', Helvetica, Sans-serif;
color: #333;
}
Vibur
HTML
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Vibur" /> <h2>Testing "Vibur" font</h2>
CSS
h2 {
font: 400 3.5em/125% 'Vibur', Helvetica, Sans-serif;
color: #333;
}
Tell us your favorite
Let everyone know your favorite font from the above list, and feel free to suggest more script and handwriting based free web fonts.
