If you are fed up with those old font families like Tahoma, Verdana, Serif and all that stuff, then there is a good news for you. Google is again there to beautify your web application with stylish font-families. The Google Font Directory lets you browse all the fonts available via the Google Font API. All fonts in the directory are available for use on your website under an open source license and are served by Google servers.
Reenie Beanie in action.
Tangerine in action.
Cantarell in action.
Crimson Text in action.
Josefin Sans Std Light Text in action.
Lobster in action.
Neucha in action.
Philosopher in action.
How to Use:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js">
</script>
<script type="text/javascript">
WebFont.load({
google: {
families: [ 'Tangerine', 'Cantarell', 'Cardo', 'Crimson Text', 'Josefin Sans Std Light', 'Lobster', 'Neucha', 'Philosopher', 'Reenie Beanie', 'Tangerine']
}
});
</script>
<style type="text/css">
*{color:#DF3D82;}
h2.rb { font-family: 'Reenie Beanie', arial, serif; }
h2.Tangerine { font-family: 'Tangerine', arial, serif; }
h2.Cantarell { font-family: 'Cantarell', arial, serif; }
h2.Cardo { font-family: 'Cardo', arial, serif; }
h2.Crimson_Text { font-family: 'Crimson Text', arial, serif; }
h2.Josefin_Sans_Std_Light { font-family: 'Josefin Sans Std Light', arial, serif; }
h2.Lobster { font-family: 'Lobster', arial, serif; }
h2.Neucha { font-family: 'Neucha', arial, serif; }
h2.Philosopher { font-family: 'Philosopher', arial, serif; }
</style>
</head>
<body>
<div style="margin:auto;">
<h2 class="rb">Reenie Beanie in action.</h2>
<h2 class="Tangerine">Tangerine in action.</h2>
<h2 class="Cantarell">Cantarell in action.</h2>
<h2 class="Crimson_Text">Crimson Text in action.</h2>
<h2 class="Josefin_Sans_Std_Light">Josefin Sans Std Light Text in action.</h2>
<h2 class="Lobster">Lobster in action.</h2>
<h2 class="Neucha">Neucha in action.</h2>
<h2 class="Philosopher">Philosopher in action.</h2>
</div>
</body>
</html>
It is very nice to here these font supports all other browsers ?
How to wrap long link.
Visit the link http://varadesigns.com/css-tricks/quick-css-trick-word-wrap.html
I have tested with the CSS property of “word-wrap: break-word” It is working
-vara